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本 书 是 一 本 学 习 HTMLS 的 宝典 ， 以 实际 项 目 为 驱动 ， 内 容 全 面 ， 讲 
解 通 俗 ， 适 合 各 层次 的 学 习 者 。 人 全书 分 为 14 W, BRAR HEHHE T 
HTMLS 的 基本 概念 和 基本 功能 ， 包 括 地 理 位 置 定位 、 本 地 存储 、 离 线 存 
储 、WebSocket、Canvas、 表 单 等 ， 而 且 对 每 一 个 概念 的 讲解 都 配备 了 恰 如 
其 分 的 示例 和 代码 ， 让 读者 通过 动手 实践 ， 切 吴 体 会 到 这 些 概念 的 含义 和 
价值 。 本 书 前 半 部 分 结合 实例 深入 讲解 了 HTMLS 在 PC 靖 的 大 放 异 彩 的 功 
能 ， 后 半 部 分 则 深入 讲解 HTMLS 在 移动 问 的 应 用 开发 知识 ， 系 统 地 讨论 
了 离线 存储 、 本 地 存储 和 HTMLS Canvas 游戏 等 主题 。 

本 书 适合 各 个 层次 的 前 总 开发 人 员 学 习 ， 无 论 是 出 于 工作 需要 ， 还 是 
好 奇 心 的 驱使 ， 只 要 你 想 深 入 理解 HTML5， 本 书 都 会 让 你 大 有 收获 。 
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我 们 生活 的 时 代 


2015 年 ， 国 务 院 提 出 “互联 网 +” 行 动 计划 ， 推 动 了 互联 网 产业 进一步 发 展 。 对 于 互 
联网 从 业者 来 说 ， 这 是 一 个 最 好 的 时 代 ， 也 是 一 个 最 坏 的 时 代 。 互 联网 产业 的 深度 发 展 ， 尤 
其 是 移动 互联 网 产业 的 飞速 发 展 ， 为 从 业者 带 来 卫 所 未 有 的 机 过， 但 也 带 来 了 前 所 未 有 的 
挑战 。 每 天 部 有 成 于 上 万 的 互联 网 产品 投入 市 场 ， 激 烈 的 苋 争 一 刻 人 不信。 前 器 工 程 师 作为 互 
联网 产业 中 的 排头 兵 ， 永 远 冲 在 互联 网 产品 开发 的 第 一 线 ， 我 们 创造 用 户 看 得 见 措 得 看 的 部 
分 ， 我 们 创造 产品 的 用 户 体 验 和 价值 ， 我 们 任 重 而 道 远 。 


用 产品 去 改变 世界 


互联 网 产业 在 不 断 发 展 ， 用 户 面 对 的 “界面 ”也 随 之 不 断 变化 ， 从 20 世纪 80 ERAI 
DOS 字符 界面 ， 到 Windows 图 形 界面 ， 到 浏览 器 界面 ， 再 到 当前 的 移动 终端 界面 。 界 面 的 
多 样 化 决定 了 我 们 已 进入 一 个 用 户 体 验 的 时 代 ， 以 前 的 产品 以 功能 为 核心 ， 而 现在 ， 用 户 体 
验 束 是 一 切 。 这 就 意味 着 ， 我 们 脑海 中 关于 软件 的 理解 需要 更 新 ， 软 件 已 经 不 能 再 单纯 被 当 
作 程 序 或 者 系统 去 看 待 ， 而 是 应 该 从 设计 伊始 就 被 当 作 一 个 产品 去 打造 。 

产品 ， 就 是 一 系列 符合 用 户 需 求 的 功能 的 组 合 。 产 品 思 维 是 互联 网 思维 中 最 重要 的 利 
右 ， 互 联网 时 代 通 过 产品 来 改变 世界 ， 实 现 梦 想 。 随 着 互联 网 的 发 展 ， 我 们 可 以 观察 到 ， 产 
品 的 功能 越 来 越 趋 于 同 质 化 ， 而 产品 的 UI 设计 与 前 端 开发 则 成 了 表达 个 性 化 和 差异 化 的 主 
战场 ， 因 为 这 两 个 领域 可 以 体现 出 美妙 的 视觉 表达 和 交互 设计 水 平 。 

互联 网 比较 传统 媒体 最 大 的 特点 就 是 交互 ， 而 友好 的 交互 才能 让 用 户 产生 好 的 用 户 体 
验 ， 企 业 越 来 越 重视 用 户 体 验 ， 从 技术 上 讲 ， 就 是 越 来 越 重 视 UI 设计 和 前 端 开发 。 

前 端 开发 技术 发 展 经 历 了 三 个 阶段 : 

第 一 阶段 是 Web 1.0 时 代 的 以 内 容 为 主 的 网 页 ， 主 流 技 术 是 HTML4 和 CSS2; 

第 二 阶段 是 Web 2.0 时 代 的 Ajax 技术 的 应 用 ， 热 门 技术 是 JavaScript/DOM/ 异 步 数据 
请 求 ; 

第 三 阶段 是 HTML5+CSS3 技术 的 应 用 ， 这 两 者 相辅相成 ， 使 前 端 技术 进入 了 一 个 轿 
新 的 时 代 。 

HTML5+CSS3 Saxe JHE Web 应 用 的 基础 ， 它 们 可 以 让 网 站 更 易 开 发 、 更 易 维护 、 更 
具 用 户 友好 性 。 同 时 借助 许多 基于 HTML 5 的 移动 开发 框架 可 以 让 开发 任务 变 得 更 加 简单 ， 


更 好 地 进行 移动 Web JF. HTMLS 通过 代码 方式 ， 增 加 区 互 功能 ， 同 时 结合 后 台 开 发 技 
I 


HTML5 
| 实战 宝典 
术 ， 进 行 Web 和 App 开发 ， 通 过 HTMLS 技术 可 以 显著 改善 用 户 体 验 。 


关于 我 们 


优 逸 客 科 技 有 限 公 司 成 立 于 2013 年 ， 总 部 位 于 山西 太原 。 公 司 是 由 国内 顶尖 的 互联 网 
技术 专家 共同 发 起 成 芯 。 优 逸 客 是 国内 互联 网 前 端 开 发 实 训 行业 的 “ 折 殉 者 ?>， 是 企业 级 产 
品 设计 “方案 提供 商 ”， 是 中 国 UI 职业 教育 的 “知名 品牌 ”公司 的 互联 网 撤 术 实 训 体系 是 
依据 历时 一 年 的 次 度 调研 ， 并 结合 企业 对 人 才 实 际 需求 研发 而 成 的 。 我 们 在 此 基础 上 配 以 宛 
善 的 职业 规划 体系 ， 规 范 的 人 才 毁 养 流程 和 标准 。 经 过 3 年 发 展 ， 公 司 已 先后 在 北京 、 山 
西 、 陕 西 等 区 域 建 立 了 互联 网 人 才 实 训 基 地 ， 己 培养 出 5000 余 名 互联 网 高 端 技 术 人 才 。 在 
未 来 ， 我 们 将 继续 秉承 “专注 、 极 致 、 口 碑 ” 的 理念 ， 逐 渐 成 长 为 我 国 顶尖 的 互联 网 人 才 培 养 
公司 。 

优 逸 客 汇 聚 了 一 批 具有 丰富 Web 开发 经 验 的 布道 师 ， 我 们 很 早 就 意识 到 ， 移 动 化 是 一 
个 再 明显 不 过 的 趋势 ， 未 来 几 年 里 ， 移 动 痕 将 是 Web 开发 的 主 战 场 ， 而 HTMLS Wizjer 
利 的 武器 ， 配 合 程序 逻辑 ， 我 们 将 能 利用 它 创造 无 限 的 可 能 

“这 个 世界 很 关 好 ， 值 得 我 们 为 之 奋斗” 


编 者 


Till 


E] 

关于 本 书 

Web 技术 日 新 月 异 ， 每 个 置 映 其 中 的 从 业者 都 有 逆水 行 丹 ， 不 进 则 退 的 感觉 。 尤 其 是 在 
2014 年 10 月 29 日 ，HIMLS 定稿 之 后 ， 互 联网 进入 了 一 个 轩 狐 的 时 代 。HTMLS5 KE TFI 
造 下 一 代 Web 应 用 的 基础 ， 它 可 以 让 网 站 更 易 开 友 、 更 易 维 护 、 更 上 其 用 户 友 好 性 。HTML5 
被 设计 为 路 平台 的 技术 ， 最 新 版 本 的 Apple Safari. Google Chrome. Mozilla Firefox, Opera 
以 及 Microsoft Internet Explorer 都 支持 HTMLS 的 许多 特性 。 在 iPhone, iPad 及 Android 移动 
Wo Le PUR AM Ds tA MT HTMLS 提供 了 极 好 的 文 持 。 

本 书 系 统 地 讲解 了 HTMLS 的 基础 理论 和 实际 运用 技术 ， 通 过 大 量 实例 对 HTMLS 进行 
深入 浅 出 的 分 析 ， 不 但 讲解 了 HTMLS 在 传统 PC 端的 开发 方法 ， 而 且 看 重 讲解 了 如 何 开发 
混合 型 APP。 全 书 注重 实际 操作 ， 使 谈 者 在 学 习 技 术 的 同时 ， 和 车 握 Web 开发 和 设计 的 精 
He, tem Zea AW Ae 

本 书 第 一 部 分 介绍 了 HTMLS 的 历史 背景 、 新 的 语义 标签 和 语法 规范 、HTML5 Ir) 525 
及 与 以 往 HTML 版 本 相 比 的 变化 ， 同 时 揭示 了 HIMLS 背后 的 设计 原理 。 第 二 部 分 介绍 了 
HTMLS 新 增 表 单 的 用 法 ， 拖 搜 、Canvas、 地 理 位 置 定位 、 本 地 存储 以 及 Canvas YH, JF 
以 项 目 为 张 动 ， 配 有 大 量 的 代 但 和 示例 图 片 。 第 三 部 分 则 主要 介绍 了 HTMLS E a k 
应 用 和 移动 端的 特性 ， 包 括 离线 存储 、WebSocket 等 知识 点 ， 并 有 结合 HBuilder 制作 
WebAPP， 同 时 结合 现在 当前 热门 的 微 信 平 台 制 作 了 一 个 微 信 小 游戏 ， 并 辅 以 大 量 代 码 示 
例 和 图 示 。 

由 于 本 书 讲解 的 知识 由 浅 入 深 并 且 以 项 目 为 有 驱动， 理论 上 适合 任何 对 HTMLS AFAA 
望 的 谈 者 ， 但 是 如 果 您 有 HTML, JavaScript 等 语言 基础 的 话 ， 阅 读本 书 会 更 有 如 人 鱼 得 水 的 
感觉 ， 如 果 您 正在 学 习 或 从 事 有 关 HTMLS 的 开发 工作 ， 那 么 我 相信 和 您 也 一 定 能 从 本 书 中 获 
得 更 为 精准 的 知识 和 实战 的 开发 经 验 。 

本 书 代码 开发 环境 

为 了 更 好 地 学 习 本 书 并 运行 本 书 案例 代码 ， 首 先知 要 搭建 一 个 合适 的 开发 环境 : 

(1) Sublime 或 者 WebStorm uid, BEES RS ITI ER s s 

(2) Chrome 浏览 器 。 

此 外 ， 本 书 的 案例 代码 中 ， 会 用 到 PHP 语言 、Node.js 和 Wamp， 相 关 环 境 搭 建 请 参考 
本 书 附 录 部 分 . 
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引用 的 其 他 资源 

在 本 书 中 ， 我 们 会 引用 部 分 W3C 的 官方 文档 和 相关 的 API， 官 方 文档 是 非常 好 的 学 习 
资源 ， 请 读者 重视 官方 文档 的 学 习 。 虽 然 我 们 也 在 本 书 当 中 列 出 了 一 些 常 用 的 API， 但 是 我 
们 还 是 建议 读者 参考 官方 文档 ， 因 为 官方 文档 肯定 是 最 准确 和 更 狐 最 及 时 的 。 
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一 个 新 的 Web 开发 平台 
HTMLS 的 出 现 ， 掀 起 了 Web 时 代 的 狐 瀛 滑 ， 各 大 浏览 器 也 部 纷 纷 支持 HIMLS. 


HTMLS 可 以 使 网 页 内 容 更 加 丰富 ， 不 仅 可 以 显示 三 维 图 形 ， 还 可 以 在 不 使 用 Flash 插件 的 基 
础 上 实现 音频 、 视 频 播 放 等 。HITMLS 是 同 下 兼容 HTML4 的 ， 它 是 在 HTMLA 的 基础 之 
上 ， 加 进 了 一 些 新 的 标记 、 属 性 、 功 能 的 一 个 新 的 超 文本 标记 语言 ， 例 如 : HTMLS 拥有 新 
的 HTML 文档 结构 、 新 的 CSS 标准 、API 等 。 

HTMLS 可 以 实现 与 原生 APP 相 媲美 的 应 用 ， 不 用 另行 下 载 安装 ， 完 全 靠 浏 览 句 就 可 以 
运行 


HTMLS5 可 以 让 开发 人 员 在 不 使 用 Flash 插件 或 第 三 方 媒体 插件 的 情况 下 ， 让 用 户 浏览 
网 页 中 的 视频 或 音频 ， 大 大 降低 了 开发 应 用 的 成 本 与 时 间 。 

HTMLS 还 提供 了 很 多 的 应 用 程序 接口 CAPD ， 例 如 基于 浏览 器 支持 的 图 形 API、 地 理 
信息 API、 本 地 存储 API 和 视频 播放 相关 的 API 等 ， 这 些 API 使 得 我 们 开发 一 个 功能 型 的 应 
用 变 得 更 加 容易 了 。 

同时 ，HTMLS 是 一 种 可 以 被 PC. Mac. iPhone, iPad 和 Android FLE 4 FPA P? yg dtl 
览 器 支持 的 跨 平 台 语言 。 

如 今 ，Web 时 代 已 被 移动 端 主导 ， 不 管 是 在 手机 上 还 是 在 平板 电脑 上 ， 随 处 可 以 见 到 
HTMLS 网 站 、HTMLS 应 用 软件 以 及 HTMLS 游戏 ，HTMLS 又 作为 移动 端 开 发 的 主流 语 
言 ， 这 都 说 明 HIMLS 是 前 途 无 量 的 。 


1.2 HTML5 为 什么 受 欢 迎 


相信 大 家 在 阅读 了 上 一 节 的 内 容 后 ， 对 HTMLS CAA SHUR, BRK, RAE 


法 特点 、 功 能 特点 和 对 移动 端的 支持 上 来 说 明 HTMLS 为 什么 受 欢迎 。 
1.2.1 语法 特点 


1. 简单 的 doctype 
我 们 在 创建 HTMLA 时 ， 使 用 的 声明 是 : 


<(DOCTYPE HTML PUBLIC Y/N DID KRIMA OI /EN /A no Ora TRY 
Pem aA Seer ee e 


而 创建 HTMLS 时 ， 使 用 的 声明 是 : 
ET 
从 直观 上 来 看 ，HTMLS 更 为 简洁 明了 ， 它 省 略 了 版 本 写 ， 但 浏览 器 依然 能 够 以 HTML 
的 标准 来 显示 网 页 。 
2. 直观 的 结构 
在 HTMLA 中 对 于 网 页 结构 的 划分 大 量 使 用 了 div， 需 要 徘 类 名 、 加 注释 才能 很 好 地 解 
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释 我 们 的 结构 ， 在 HTMLS ay bi article, footer, header. nav. section 等 标签 来 更 好 地 
了 解 我 们 的 结构 。 


12.2 ”功能 特点 


1. 音频 、 视 频 
在 网 页 中 想 要 实现 音频 、 视 频 播放 ， 一 般 都 需要 引入 Flash 或 第 三 方 媒 体 插件 ， 并 且 要 
ERS, (WO. ME HTMLS rp, Hom: 


—" 


音频 : «audio src="url" autoplay loop></audio> 

视频 : «video src="url" width="300" height="200" controls></video> 

就 可 以 了 ， 可 以 像 使 用 <img> 标 签 一 样 来 实现 音频 、 视 频 播 放 。 

2. 本 地 存储 

HTMLS 可 以 帮助 浏览 器 存储 一 些 用 户 的 信息 、 绥 存 的 数据 、 应 用 的 使 用 状态 等 ， 这 样 
一 来 ， 可 以 加 快 访问 应 用 的 速度 ， 可 以 记录 用 户 上 一 次 的 使 用 状态 ， 在 重新 加 载 时 上 只 加 载 修 
改过 的 状态 ， 节 省 资源 。 

3. 强大 的 Canvas 

使 用 Canvas 可 以 达到 Flash 的 效果 ， 它 可 以 实现 动画 设计 和 游戏 开 友 。 

4. 地 理 信息 

HTMLS 中 提供 了 地 理 位 置信 息 的 API (geolocation )， 通 过 浏览 器 来 获取 用 户 当 前 位 
置 。 在 获取 位 置信 息 前 ， 浏 览 费 会 给 用 户 一 个 提示 信息 ， 只 有 用 户 同 总 以 后 才能 使 用 。 通 过 
此 特性 可 以 开发 基于 位 置 的 服务 应 用 。 


1.2.3 ”对 移动 端的 支持 


开发 移动 端 应 用 有 儿 种 方式 ， 可 以 采用 有 原生 方式 ， 也 可 以 采用 Web 技术 来 开发 。 与 原生 
方式 相 比 ，Web 技术 只 需要 使 用 HTML. CSS 和 Javascript 就 可 以 开发 移动 问 应 用 ， 节 省 了 开 
发 成 本 ， 提 高 了 开发 效率 ， 对 于 研发 人 员 来 说 ， 也 绕 开 了 不 少 撤 术 困难 。HTMLS AS cE xt 
Android. iOS 等 移动 平台 的 路 平台 语言 ， 所 以 在 开发 移动 闫 应 用 时 具有 更 大 的 优势 。 

当前 主流 的 手机 开发 平台 有 : iOS, Android 等 。 其 中 ，iOS 平台 需要 针对 480X320, 
960 X 640 及 1024X768 像素 的 分 辨 率 分 别 设 计 ; Android 平台 中 QVGA 分 辨 率 为 240X320 像 
素 及 更 高 ， 即 使 同一 个 平台 ， 分 辨 率 不 同 ， 设 计 也 会 有 相应 的 差异 。 加 之 客户 端 产品 需要 不 断 
地 更 新 迭代 ， 从 1.0 版 本 、2.0 版 本 一 直到 N.0 版 本 ， 每 开发 一 次 Native App 就 需要 重建 一 次 
平台 。 而 且 现实 状况 是 并 非 所 有 用 户 都 会 积极 更 新 新 的 版 本 ， 所 以 设计 师 和 开发 人 员 在 研发 靳 
功能 的 时 候 还 要 顾及 之 前 的 旧版 本 会 不 会 文 持 等 问题 。 不 同 的 平台 加 上 不 同 的 版 本 ， 大 量 人 力 
物力 被 投入 到 了 铺设 平台 的 工作 中 ， 提 高 产品 用 户 体 验 的 精力 就 变 得 比较 有 限 。 

FEMZEK T 2X9 Ve see TES. JPARBHPE —RUB IT Native App 的 事物 出 
现 ， 而 由 HIMLS 技术 开发 的 Web App 的 出 现 满足 了 这 种 愿望 。HIML3S 技术 的 洽 染 过 程 主 
要 是 由 浏览 器 、 内 网 HTMLS 解析 器 的 应 用 程序 、 文 持 书 签 打 开 方 式 的 应 用 程序 或 移动 手机 
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产品 进行 的 。 如 此 ， 产 品 的 上 线 和 版 本 更 新 不 再 需要 花费 那么 长 时 间 来 铺 平 台 ，Appcelerator 
的 内 部 逻辑 会 将 产品 的 UI 转换 为 iOS 或 Android 等 平台 的 原生 界面 。 同 时 ，Web App 形式 
的 产品 不 需要 用 户 下 载 更 新 ， 通 过 网 络 即 可 以 访问 最 新 版 本 ， 也 便于 设计 师 和 开发 人 员 调 试 
AU TEAR Re, AN FEE CE FRET IE CAS HY f] eid o 

在 苹果 、 众 歌 及 微软 等 公司 的 积极 倡导 下 ，HTMLS 技术 进步 神速 ，Web App 可 以 实现 
的 效果 越 来 越 丰 富 ， 很 多 Web App 已 经 可 以 和 Native App HEE J. 

对 于 未 来 儿 年 里 HTMLS 的 发 展 前 景 ， 概 括 来 说 ， 将 会 有 很 多 公司 进入 HTMLS 这 个 领 
hà, HTMLS 也 会 像 传统 的 Flex, Flash, Silverlight 和 Objective-C 那样 ， 形 成 一 套 自己 独 有 
的 生态 系统 。HTMLS 将 会 比 Flex, Flash, Silverlight 和 Objective-C 更 容易 出 现在 任何 一 个 
终端 设备 中 。 对 于 年 轻 一 代 的 开发 者 ，HTMLS5 会 成 为 他 们 的 首选 技能 ， 有 很 多 公司 都 会 需 
要 这 方面 的 人 才 。 到 目前 为 止 ， 越 来 越 多 的 行业 巨头 正 不 断 间 HTMLS E. RITER mM 
软 、 黑 每 之 外 ， 人 和 谷歌 的 Youtube 已 部 分 使 用 HTMLS; Chrome 浏览 器 宣布 全 面 支 持 
HTML5; Facebook 则 不 遗 余力 地 为 HTMLS 进行 着 病毒 式 传播 。 一 切 正 如 正 益 无 线 总 裁 王 
国 春 所 说 :“HTMLS 代表 了 移动 互联 网 发 展 的 趋势 ， 总 有 一 天 它 将 成 为 主流 技术 ”。 所 以 ， 
HTMLS 作为 一 个 前 端的 编程 语言 ， 其 发 展 前 景 是 非常 好 的 ! 

我 们 还 可 以 从 以 下 方向 中 看 到 HIMLS 的 发 展 前 景 。 

C1) 手机 页 游 的 3D 化 是 大 势 所 趋 。 随 看 便 件 能 力 的 提升 、WebGL 标准 化 的 普及 以 及 手 
机 页 游 和 逐渐 成 熟 ， 大 量 开 发 者 需要 创作 更 加 精彩 的 3D 内 容 。 

(2) HTMLS 移动 营销 出 现 更 多 新 玩法 。 游 戏 化 、 场 景 化 、 跨 屏 互 动 ，HTMLS5 技术 满足 
了 广告 主 对 移动 营销 的 大 部 分 需求 ， 从 形式 到 功能 ， 下 到 传播 。 

(3) 动漫 、 二 次 元 。HIMLS 技术 的 成 熟 ， 将 带 来 动漫 产业 的 升级 。 动 漫 元 素 本 和 映 可 通 
过 HTMLS 来 强化 创意 ， 动 漫 形式 将 具有 富 媒 体 的 高 上 度 交互 、MYV 影音 功能 ， 为 读者 提供 更 
加 场景 化 的 阅读 体验 。 

(4) 轻 应 用 、Web App, Wiis HTML5S 开发 移动 应 用 更 灵活 。 采 用 HTMLS 技术 的 轻 应 
用 、Web App， 以 其 开发 成 本 低 、 周 期 短 、 易 推广 等 优势 ， 将 迅速 普及 。 

(5) 移动 视频 、 在 线 直 播 引 领 视 频 升 级 。HTMLS 技术 将 会 革新 视频 数据 的 传输 方式 ， 
让 视频 直播 更 加 高 清流 畅 。 而 且 ， 视 频 还 将 与 网 页 真正 地 融 为 一 体 ， 让 用 户 看 视频 如 浏览 动 
态 图 一 般 人 简单 轻松 。 

(6) 资源 复 用 ，HTMLS 重新 洗 牌 卫 市 场 。 

CI) XH), HTMLS WMZ V Rp" MARE 

(8) Web VR 让 VR 从 贵族 走向 大 众 化 。 

(9) 微 信 很 有 可 能 会 推出 HTMLS 应 用 市 场 。 


1.3 HTML5 的 可 持续 性 


1.3.1 技术 支持 


新 谎 加 的 标签 ， 更 加 便于 SEO, férussüvhae] ] Eu BH BERE. SCR. ES HA g 
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分 的 搜索 ， 从 而 帮助 我 们 的 网 站 提升 内 容 的 价值 。 
开发 移动 APP 的 方式 ， 从 Native (本 地 APP) 到 HTMLS 再 到 Hybrid (混合 型 ) 的 出 
D, permi S FREE, im LEI MEH Cordova 框架 或 HBuilder 等 软件 来 开发 。 可 以 减 
少 插件 ， 方 约 开 发 成 本 ， 而 且 要 运行 同一 个 功能 ， 只 和 需要 在 不 同 的 平台 进行 编译 就 可 以 实现 
中 平台 运行 。 


1.3.2. ”浏览 器 厂商 支持 


Hav, gee 了 下、 谷歌 Chrome, IR Safari, Opera 和 Firefox 等 主流 浏览 器 均 已 支持 
HTMLS 的 大 部 分 功能 ， 共 体 文 持 情 况 请 读者 参考 本 书 第 2.4 75. 


1.4 HTML5 的 发 展 历程 


1993 年 6 H, HTML 由 互联 网 工程 任务 组 CETF) 发 布 HTML 1.0， 但 它 不 是 标准 的 结 
构 语言 ， 意 义 不 大 。 

1995 年 11 H, IETF 发 布 HTML 2.0， 它 是 HTML 最 早 的 规范 。 

由 于 万 维 网 联盟 (W3C, World Wide Web Consortium) 的 出 现 ，IETE 把 Web 标准 的 
制定 权 转 让 给 W3C. 1996 年 的 1 H, W3C 推出 HTML 3.2。 在 之 后 三 年 的 时 间 内 ，W3C 对 
HTML 做 了 很 多 改进 ， 并 相继 发 布 了 几 个 版 本 。 

1999 年 ，W3C 发 布 HTML 4.01。 它 可 以 使 文档 内 容 与 样式 分 离 ， 而 不 会 像 HTML 3.2 
一 样 破坏 文档 内 容 ， 维 护 起 来 更 加 方便 。HTML 4.01 成 了 20 世纪 90 年 代 非 常 流 行 的 网 页 编 
辑 语言 ， 对 Web 影响 非常 之 大 。 

2001 年 ，W3C 发 布 XHTML 1.0， 它 在 HTML 4.01 的 基础 上 做 了 修改 ， 相 比 HTML 4.01 
语法 更 为 严格 ， 版 本 更 为 纯 浪 ， 而 且 它 还 能 在 当时 所 有 的 浏览 器 上 被 解释 ， 成 为 更 标准 的 标 
记 语 言 。 紧 接着 ，W3C 又 发 布 了 XHTML 1.1， 它 和 XML 没有 什么 区 别 ， 在 使 用 XHTML 1.1 
文档 时 ， 当 时 最 热门 的 Internet Explorer (IE) X v aRAUZGIA1EP ue PTA, W3C 又 继续 改进 
XHTML 1.1. Æ 2002 年 8 月 发 布 了 XHTML 2.0， 但 是 它 不 兼容 之 前 的 HTML 版 本 ， 使 用 时 
需要 重新 和 学习， 这 对 于 网 页 编辑 人 员 来 说 并 不 是 好 事 。 

2004 年 ， 网 页 超 文 本 应 用 技术 工作 小 组 (Web Hypertext APPlication Technology 
Working Group, WHATWG) 成 立 ， 重 走 HTML 的 路 线 ， 开 始 创建 HTML5。 他 们 从 两 个 方 
面 对 HTML 进行 扩展 ， 分 别 是 Web Form 2.0 和 Web APPs 1.0， 之 后 这 两 个 版 本 合并 成 为 
HTML5。 与 此 同时 ，W3C 还 在 继续 研究 XHTML. 

2006 年 ，W3C 选择 开发 HIMLS， 自 己 成 立 了 HTML5 的 工作 组 ， 它 在 WHATWG 研 
发 的 HIMLS 的 基础 上 研究 。 

2008 年 ，W3C 发 布 『 HTMLS 的 草案 ， 这 是 HTMLS 的 最 初版 本 。2009 年 ，W3C 放弃 
T XHTML 的 研究 。 

2010 Æ, HTML5 的 视频 播放 器 开始 取代 Flash 的 地 位 ， 并 且 得 到 Google 的 大 力 支 持 ， 
IN, HTMLS 的 语法 规范 也 开始 攻击 IE 的 私有 语法 ， 打 做 Adobe Flash 与 正在 Web 上 的 
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2011 年 ， 迪 士 尼 、 亚 马 进 和 Pandora 电台 相继 使 用 了 HTMLS 编写 的 应 用 和 音乐 播放 
囊 ， 因 为 可 以 离线 使 用 ， 获 得 了 用 户 的 好 评 ， 而 Adobe 公司 停止 为 移动 设备 开发 Flash 
播放 器 。 

2012 ^E, LinkedIn 推出 的 iPad 应 用 ，95% 都 是 基于 HTMLS 开发 的 。HTMLS 还 支持 大 
容量 的 文件 上 传 ，Flickr 束 使 用 它 提高 了 上 传 速度 。 

2013 年 ， 大 部 分 的 手机 都 开始 文 持 HTMLS 的 应 用 。 

终于 ， 经 过 8 年 的 艰辛 研究 后 ， 在 2014 年 10 月 29 日 ，W3C 宣布 HTMLS 的 标准 规范 
制定 完成 
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2.1 新 的 文档 声明 和 语法 规范 
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2.1 新 的 文档 声明 和 语法 规范 


从 本 章 开 始 ， 我 们 束 开 始 学 习 HTMLS PRIYE eee. RTE, ESR Se PDR 


讲解 各 个 标签 、 属 性 的 用 法 。 
2.1.1 文档 声明 


1. <!doctype>Ay z= X. 

<!doctype> 声 明 必 须 位 于 HTMLS 文档 中 的 第 一 行 ， 也 就 是 位 于 <html> 标 签 之 前 。 该 标 
AS Er ALTA ae SOS IT EA A) HTML 规范 。 

(1) doctype 声明 不 属于 HTML 标签 ; ‘EE ASRS, VED aS OU A pt 
的 版 本 。 

(2) 在 所 有 HTML 文档 中 ， 规 定 doctype 是 非常 重要 的 ， 这 样 浏览 器 束 能 了 解 预 期 的 文 
档 类 型 。 

(3) HTML 4.01 中 的 doctype 需要 对 DTD 进行 引用 ， 因 为 HTML 4.01 基于 SGML。 而 
HTML 5 不 基于 SGML， 因 此 不 需要 对 DTD 进行 引用 ， 但 是 需要 doctype 来 规范 浏览 右 有 的 行 
为 《让 浏览 器 按照 它们 的 方式 来 运行 )。 

2. <!doctype> 的 用 法 

WEE XE 

<!doctype html> 

«html lang="en"> 

<head> 

<meta charset="UTF-8"> 
IE 
</head> 

<body> 

HTML5 的 主体 结构 。 

</ol> 

«y nema 


在 Sublime 和 WebStorm 中 可 以 使 用 快捷 键 快 速 创 建文 档 主体 结 构 ， 详 见 附录 A. 

3. 注意 

<ldoctype> 对 大 小 写 不 敏感 ， 而 且 它 没有 结束 标签 。 

4. EX. XS E BU TU SE 

<meta> 位 于 头 部 中 ， 它 用 于 提供 页 面 的 元 信息 ， 用 来 描述 网 页 的 关键 词 、 网 页 更 新 的 频 
度 ， 同 时 也 可 以 为 搜索 引擎 的 搜索 提供 便利 。 它 的 属性 还 定义 了 与 文档 相关 联 的 名 称 / 值 对 
《元 数据 总 是 以 名 称 / 值 的 形式 被 成 对 传递 的 )。 
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5. meta 的 属性 

(1) content 属性 

content Ja EREE Y A MIVIEONE FINE. TATE RI DAZE HELA ASI SEF E 

content 属性 始终 要 和 name 属性 或 http-equiv 属性 一 起 使 用 。 

(2) http-equiv 属性 

http-equiv 属性 为 名 称 / 值 对 提供 了 名 称 。 并 指示 服务 器 在 发 送 实际 的 文档 之 前 ， 先 在 要 
传送 给 浏览 右 的 MIME 文档 头 部 包含 名 称 / 值 对 。 

当 服 务 器 癌 浏 览 右 发 送 文档 时 ， 会 先 发 送 许多 名 称 / 值 对 。 虽 然 有 些 服务 器 会 发 送 许多 
这 种 名 称 / 值 对 ， 但 是 所 有 服务 右 都 全 少 要 友 送 一 个 : content-type:text/html. ROA VED bias 
准备 接收 一 个 HTML 文档 。 

使 用 市 有 http-equiv 属性 的 <meta> 标 签 时 ， 服 务 器 将 把 名 称 / 值 对 添加 到 发 送 给 浏览 恬 的 
AAAS. PERS: 


Re 


Im 可 

TOPE ACIS SI DU] AS SK CINE VA 85 : 

content-type: text/html 

charset:1so-8859-1 

expires:3 1 Dec 2008 

SR, RAS vds] E Bel ES IY OA SW E. FPREDIE SSE EIEN, xx 
HEP BCAA X. 

(3) name 属性 

name 属性 提供 了 名 称 / 值 对 中 的 名 称 。HTML 和 XHTML 标签 部 没有 指定 任何 预先 定义 
的 <meta> 名 称 。 通 稍 情 况 下 ， 用 户 可 以 目 由 使 用 对 目 己 和 源 文 档 的 谈 者 来 说 享有 意义 的 名 称 。 

例如 "keywords" 是 一 个 经 党 被 用 到 的 名 称 。 它 为 文档 定义 了 一 组 关键 学 ， 东 些 搜索 引擎 
在 迪 到 这 些 关 键 字 时 ， 会 用 这 些 关 键 字 对 文档 进行 分 类 。 

类 似 的 meta 标签 可 能 对 于 进入 搜索 引擎 的 索引 有 大助 : 


<meta name="keywords" content="HTML, ASP, PHP, SQL"> 


如 果 没 有 提供 name 属性 ， 那 么 名 称 / 值 对 中 的 名 称 会 采用 http-equiv 属性 的 值 。 
(4) charset 属性 : 提供 编 妈 方式 


«meta charset="utf-8"> 


UTF-8 (8-bit Unicode Transformation Format) 是 一 种 针对 Unicode 的 可 变 长 度 字 符 编 
人 码 ， 也 是 一 种 前 级 个， 又 称 万 国 码 。 它 可 以 用 来 表示 Unicode 标准 中 的 任何 字符 ， 因 此 ， 它 
逐渐 成 为 电子 邮件 、 网 页 及 其 他 存储 或 传送 文字 的 应 用 中 ， 优 先 采 用 的 编码 。 

GB-2312 是 计算 机 可 以 识别 的 编码 ， 适 用 于 汉字 处 理 、 汉 字 通 信 等 系统 之 间 的 信息 交 
换 ， 它 共 收 入 汉字 6763 “SIEM AEF 682 个 。 

GBK 是 GB2312 的 扩展 版 本 。 

(5) 3E HIT P im HT] meta 标签 


ELE 


HTML5 
ENDE c5 


«meta name-"viewport" content-"width-device-width,initial-scale-1, maximum- 


Scale-1, minimum-scale-1,user-scalable-no"» 


其 中 meta 的 参数 说 明 如 下 : 

name="viewport": 表示 网 页 窗口 。 

content 属性 中 的 值 可 以 有 以 下 儿 种 情况 : 

width: 控制 viewport 的 宽度 ， 可 以 指定 一 个 具体 的 值 ， 用 于 移动 应 时 赋值 为 device- 
width, RANCH Suh FF ue 

height: 控制 viewport 的 高 度 ， 与 width 使 用 方式 一 样 。 

initial-scale: 初始 缩放 比例 ， 页 面 第 一 次 加 载 时 的 比例 。 

maximum-scale: 最 大 缩放 比例 ， 取 值 范 围 为 0 一 10.0。 

minimum-scale: 最 小 缩放 比例 ， 取 值 范围 为 0 一 10.0。 

user-scalable: 是 否 人 允许 用 户 手 动 缩放 。 当 值 为 yes 或 true WN, Aaa, “AA 
no BK false 时 ， 表 示 不 能 缩放 。 

viewport 用 来 重新 设置 设备 的 分 辨 率 ， 让 网 页 在 设备 上 都 正好 满 屏 显示 。 


2.1.2 ”语法 规则 


CD 标签 要 小 写 。 

(2) 属性 值 可 以 不 加 "或 ”。 

(3) 可 以 省 略 某 些 标签 : html、body、head、tbody。 
O 可 以 省 略 东 些 结束 标签 : try td. din 

(5) 单 标签 不 用 加 结束 标签 : img. input. 

6) 废除 的 标签 : font、center、big。 

CO) 新 添加 的 标签 ， 请 查阅 本 章 2.3 节 。 


2.2 ”上 废弃 的 标 仿 和 属性 


从 上 一 节 的 内 容 中 我 们 可 以 看 出 HIMLS 相 比 之 前 版 本 做 出 的 改进 ， 它 的 改进 不 止 这 
些 ， 它 还 将 一 些 音 用 标签 和 属性 抛 寞 了 。 本 节 主 要 次 明 废 弃 的 标签 和 属性 如 何 来 代替 。 


2.2.1 废弃 的 标签 


1. 表现 性 标签 

HTML 中 的 有 些 标签 只 是 为 了 画面 展示 而 服务 的 ， 比 如 u 标签 ， 在 使 用 时 ， 想 要 显示 
下 夯 线 的 字体 需要 用 u 标签 包 起 来 ， 它 只 是 与 其 他 文学 显示 的 状态 样式) 不 同 而 已 ， 在 
HTMLS 中 像 这 类 的 状态 (样式 ) 都 可 以 用 CSS 属性 编辑 ， 所 以 将 这 类 标签 废弃 掉 了 。 gu 
标签 类 似 的 还 有 basefont、big、center、font、s、strike、tt 等 标签 ， 它 们 都 可 以 用 相应 的 
CSS 属性 来 代 符 。 
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2. 框 染 类 标签 

HTML 中 的 框架 标签 fame、frameset、noframes 对 页 面 的 可 用 性 有 负面 影响 ， 所 以 在 
HTMLS 中 将 它们 废弃 了 ， 使 用 iframe HERS, EMR img 标签 一 样 ， 写 入 地 址 ， 设 置 好 
宽 高 就 可 以 了 。 

3. 局 限 性 标签 

RARITA ARX RR Applet (Java 小 应 用 程序 )、bgsound (HARIA st eR). blink 
《可 以 闪烁 的 字体 )、marquee GRAN Fe) 等 标签 ， 这 些 标签 在 HTMLS 中 也 被 废弃 掉 了 。 

4. 其 他 被 废除 的 标签 : 

这 是 一 些 很 少 用 到 的 标签 ， 它 们 特殊 但 没有 被 W3C 列 入 规范 ， 所 以 在 HTMLS 中 也 被 
废弃 了 。 

例如 : 

rb 标签 用 来 设 定 航 标示 的 元 素 对 象 ， 为 ruby HFR, EH ruby HN 

acronym 标签 定义 首 字母 缩写 ， 使 用 abbr EH. 

dir 标签 定义 目录 列表 ， 使 用 ul 符 代 。 

isindex 标签 显示 输入 框 ， 使 用 form 与 input 相 结 合 的 方式 蕉 代 。 

listing 标签 显示 静态 页 面 源 代码， 使 用 pre AR. 

xmp 标签 原样 输出 代码， 使 用 code #8. 

plaintex 标签 ， 使 用 “text/plain”( 无 格式 正文 )MIME KWER. 


2.2.2 JE SEE TE 


用 表 2-1 来 说 明 HTMLS 中 废弃 的 属性 。 


表 2-1 废弃 的 属性 


在 HIML4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML5 中 的 替代 方案 
在 被 链接 的 资源 的 中 使 用 HTTP Content-type 头 
charset link, a - 
元 素 
longies 使 用 a 元 素 链接 到 较 长 描述 
archive, chlassid, codebose, codetype, TNT 使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 这 
declare, standby TS 些 属 性 来 设置 参数 时 ， 使 用 param 属性 


EUN 


实战 宝典 
在 HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 

caption , input, legend, 

align div, hl, h2, h3, h4, h5, 

alink, link, text, vlink, background, 
body 

bgcolor 
align. bgcolor. border, cellpadding 、 


cellspacing, frame, rules, width 

align, char, charoff, height. nowrap. 
valign 

align, bgcolor, char, 
nowrap, valign, width 


charoff. height, 


align, bgcolor, char, charoff, valign t 
align, char, charoff, valign, width 
align, border, hspace. vspace 
clear 


compace, type ol, ul, li 


compace 
compace menu 
width re 


align, hspace. vspace 


d$ 


align, noshade, size, width 


align. frameborder, scrolling, marginheight, Tane 
marginwidth 


autosubmit menu 


ANT AY) Zig 44) s UIS TE 


在 HTMLS 中 的 替代 方案 
使 用 以 明确 简洁 的 文字 开头 、 后 跟 详 述 文字 的 
形式 。 可 以 对 更 详细 内 容 使 用 title 属性 ， 来 使 单 
元 格 的 内 容 变 得 简短 
在 被 链接 的 资源 的 中 使 用 HITP Content-type 头 
元 素 
使 用 CSS 样式 表 替 代 


使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FAREA 
使 用 CSS FESR EEN 
使 用 CSS FESR EEN 
使 用 CSS FARER 
使 用 CSS FERRER 
使 用 CSS FESR EEN 
使 用 CSS PES EEN 
使 用 CSS FERRER 
使 用 CSS FARER 
使 用 CSS FESR EEN 


2.3.1 新 的 标签 


HTMLS 新 增 了 一 些 标签 ， 但 它们 并 不 像 我 们 想象 的 那样 阳 生 ， 它 们 只 是 更 加 符合 我 们 
的 思维 方式 ， 更 人 性 化 。 投 照 以 往 的 布局 方式 ， 我 们 要 划分 页 面 结构 时 都 是 使 用 的 div， 例 
如 <div_ class="header"></div>, «div id="footer"></div> 等 。HTML5 直接 用 header. footer 标 
FRIRE div， 这 类 标签 更 加 语义 化 ， 便 于 疏 虫 谈 取 (SEO)。 下 面 详细 介绍 HTMLS 新 增 的 


标签 以 及 它们 的 用 法 。 
1. 结构 性 标签 


结构 性 标签 (construct tag) 主要 负责 Web 的 上 下 文 结构 的 定义 ， 确 保 HTML 文档 的 完 
整 性 ， 使 网 页 的 文档 结构 更 加 明确 。 这 类 标签 包括 以 下 几 个 : 
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ES 


HTML5 规范 


(1) section 标签 用 于 表达 文档 的 一 部 分 或 一 草 ， 或 者 一 章 内 的 一 节 。 在 Web 页 面 应 用 中 ， 
该 标签 也 可 以 用 于 区 域 的 草 市 表述 。 它 用 来 表现 普通 的 文档 内 容 或 应 用 区 块 ， 通 党 由 内 容 及 
其 标题 组 成 。 但 section 标签 并 非 一 个 普通 的 容器 元 素 ， 它 表示 一 段 专 题 性 的 内 容 ， 一 般 会 
带 有 标题 。 

代码 示例 ; 


<section> 

<hi >see RENE /hl» 

“elie sabeis 

<Ph2> 第 一 闻 的 标题 </n2> 

< cre IL eee AS 
</article> 

</section> 


(2) hgroup 标签 对 网 页 或 区 段 (section) 的 标题 进行 组 合 。 
代码 示例 : 


-<ngroup- 

<hi> = HTML Mi «/h1» 
<h2>58 — B 新 的 结构 标签 和 属性 </h2> 
<h3> 痢 的 标签 </nh3> 
<h4> 结 构 性 标签 </h4> 


moe op 


(3) header bR AS 4H 24 T vin EVE EMSRS Cia) ， 注 总 区 别 于 head 标签 。 这 里 可 以 
给 初学 者 提供 一 个 判断 区 别 的 小 技巧 : head 标签 中 的 内 容 往往 是 不 可 见 的 ， 而 header 标签 
往往 在 一 对 body 标签 之 中 。 

SAN Bl: 


<header> 
<h1> 网 页 的 标题 </h1> 
<nav> 上 导航 部 分 </nav> 
</header> 


(4) footer 标签 相当 于 页 面 的 底部 (页 脚 )。 通 常 ， 人 们 会 在 这 里 标 出 网 站 的 一 些 相 关 信 
恩 ， 例 如 关于 我 们 、 法 律 申 明 、 邮 件 信 息 、 管 理 入 口 等 。 
代码 示例 : 


<Poouer> 
&copy; 网 页 的 版 权 声 明 。 


AGGRE 


(5) nav 标签 是 专门 用 于 沫 单 导航、 链接 导航 的 标签 ， 是 navigator 的 缩写 。 
代码 示例 : 


<nav> 
<ul> 


HTML5 
实战 宝典 


«ler eS rae Decem Tabs 
um ncc Ede A 
人 
< 
«debes hres" tS eA) ae Ia 
«mls 

</nav> 


(6) article 标签 用 于 表示 一 篇 文章 的 主体 内 容 ， 一 般 为 文字 集中 显示 的 区 域 。 
ANI BU: 


<article> 

<header> 

<h1> 文 章 的 标题 </h1> 

<time datetime="2015-08-08">2015.08.08</time> 
</header> 

<p> NAA </p> 

</article> 


2. RRM 

块 级 性 标签 〈block tag) 主要 完成 Web 页 面 区 域 的 划分 ， 确 保 内 容 的 有 效 分 隅 ， 这 类 标 
签 包 括 以 下 几 个 。 

(1) aside 标签 是 用 以 表达 注 记 、 贴 士 、 侧 栏 、 摘 要 、 插 入 的 引用 等 作为 补充 主体 的 内 
容 。 从 一 个 简单 页 面 显示 上 看 ， 束 古 侧 边栏 ， 可 以 在 左边 ， 也 可 以 在 右边 。 从 一 个 页 面 的 局 
BUE. e. 

SAN Bl: 

Kee cle 


<p>tF ala </p> 
</aside> 


(2) figure 标签 规定 独立 的 流 内 容 〈 图 像 、 图 表 、 照 片 等 )， 通 名 与 figcaption 联合 使 用 。 
代码 示例 : 
<figure> 


<figcaption> A= Ria figcaption 
E nece E alate), joe! eub Pose Es 


E O a 


(3) code ERAS ZR — RRI, 
代码 示例 : 


<code>— Ex Hin (tig</code> 
(4) dialog PÆRE XXEN B4 L1, Hütr«do. «dd—ERARTEH]. ERTE open 规定 dialog 
ITRE, APA Zea. 
代码 示例 : 


D 


HTML5 规范 
«table border="1"> 
p 
<td>}il—<dialog open- RJ A th Bei O</dialog></td> 
«deae 
«Edu </td> 
=) war 
LTES 
“ec 7 OE 
uel Src eb 
ol ds op 
<< ee 
</table> 


(5) Canvas 标签 。 它 是 一 个 画布 标签 ， 用 它 可 以 实现 电脑 上 的 画图 工具 ， 可 以 在 网 页 中 
男 出 不 同 的 图 形 。 

3. {TARE 

行内 语义 性 标签 (in-line tag) 主要 完成 Web 页 面具 体内 容 的 引用 和 表述 ， 是 丰富 内 容 
展示 的 基础 ， 这 次 标签 包括 以 下 儿 个 标签 。 

CI) meter 标签 表示 特定 范围 内 的 数值 ， 可 用 于 工资 、 数 量 、 百 分 比 等 。max 表示 最 大 
值 ，min 表示 最 小 但，value 代表 当前 值 ， 如 图 2-1 rn. 

代码 示例 : 


<merer value=w6O" minmn="0" mazx="10">6/10</meter><br> 


<merter value="0 ,37>50%</merter> 


图 2-1 meter 示例 


(2) time 标签 表示 时 间 值 ， 访 元 系 能 够 以 机 器 可 谈 的 方式 对 日 期 和 时 间 进 行 编码 ， 属 性 
datetime 强调 日 期 和 时 间 。 
代码 示例 : 
<p> 
«time datetime="2015-09-27">HRkji</time>S_Lm2l y. 
A 


(3) progress 标签 用 来 表示 任务 的 进度 条 ， 属 性 max 表示 最 大 任务 值 ， 属 性 value 表示 
完成 了 多 少 任务 ， 如 图 2-2 所 示 。 
代码 示例 : 
<p> Pave: </p> 


<progress value="34" max="100"></progress> 


as | 


eS : 


图 2-2 progress 示例 


4. 多 媒体 标签 

多 媒体 标签 (multimedia tag) ， 它 可 以 让 网 页 对 视频 和 音频 有 看 更 好 的 实现 ， 不 用 再 与 
其 他 的 插件 配合 使 用 。HTMLS5 中 提供 了 video 视频 标签 与 audio 音频 标签 ， 详 情 参 照 第 8 章 
HTMLS5 对 多 媒体 的 文 持 。 

o. 表单 控件 

HTMLS 中 的 表单 更 加 自由 ， 不 用 将 表单 元 素 全 部 放 在 form 标签 对 中 ， 它 可 以 放 在 页 面 
的 任何 位 置 ， 表 单元 素 上 只 需要 通过 form 属性 指 癌 元 素 有 所属 表单 的 id fo, WAIRERE 
起 来 。 而 且 以 前 使 用 表单 ， 都 需要 用 JavaScript 来 验证 用 户 输 入 的 信息 是 否 规 范 ， 现 在 狐 增 
的 一 些 表 单 探 件 目 市 验证 功能 ， 大 大 的 解放 了 我 们 的 双手 。 例 如 datalist 选项 列表 标签 、 
output 输出 标签 、email 输入 类 型 、url 输入 类 型 、 日 期 时 间 类 型 、number KF! range 清 块 
类 型 、search 类 型 、tel 类 型 、color 类 型 等 。 详 情 参 照 第 3 Ht HTMLS 表单 新 功能 。 

6. 交互 性 标签 

交互 性 标签 (interactive tag) 主要 用 于 功能 性 的 内 容 表 达 ， 会 有 一 定 的 内 容 和 数据 的 关 
联 ， 它 是 各 种 事件 的 基础 ， 这 类 标签 包括 以 下 几 个 。 

(1) menu 标签 主要 用 于 交互 沫 单 〈 这 是 一 个 曾 被 废 弃 现 在 义 被 重新 启用 的 标签 )， 它 会 
实现 女 标 右 击 元 素 会 出 现 一 个 采 蛙 ， 但 几乎 所 有 的 主流 浏览 器 都 不 文 持 它 。 

属性 说 明 : 

1) type: 规定 要 显示 哪 种 菜单 类 型 。 它 有 3 BAT: 

list: 列表 荣 单 ， 一 个 用 户 可 执行 或 激活 的 命令 列表 。 

context: 上 下 文采 单 ， 它 必须 在 用 户 能 够 与 命令 进行 交互 之 前 被 激 活 。 

toolbar: 工具 栏 染 单 ， 人 允许 用 户 立 即 与 命令 进行 交互 ， 它 是 一 个 活动 式 命 令 。 其 中 
list，toolbar 功能 还 未 实现 。 

2) label: 规定 末 单 的 可 见 性 ， 值 为 text( 想 要 显示 的 文本 )。 

代码 示例 : 


<menu type="toolbar"> 
eine 


«menu label="File"> 

«button type-"button" onclick-"file new()"»3$É«/button» 
«button type-"button" onclick-"file open()"»1]Jf«/button» 
«button type-"button" onclick-"file save () ">tKf</button> 
</menu> 

“of qb 

hal 

<menu label="Edit"> 


ion T 见 汇 
buon Eyoe— Pe onclick-"edit cut () ">BJW)</button> 
«button type="button" onclick="edit copy () "> il</button> 
«button type-"button" onclick-"edit paste () ">#illi</button> 
</menu> 
<j bs os 


</menu> 


(2) command fk Hj ok Ab Jag Sree, ANA PH WAS. HH SY £u 
都 不 文 持 。 
代码 示例 : 


<menu> 


<command type="command">Click Me!</command> 


</menu> 


(3) menuitem 是 用 来 显示 玉 蛙 项目 的， 它 有 如 下 属性 : 

1) icon: 给 末 单 项 瀛 加 图 标 。 

2) label: KAPJ HZI. 

3) checked: 页 面 加 载 后 选中 来 单项 目 。 

4) default: WE SA IO. 

5) open: 定义 details 是 否 可 见 。 

6) radiogroup: 命令 组 的 名 称 。 适 用 于 type="radio". 

E Gude ieee ata command (相关 联动 作 
的 普通 命令 ); radio CME). RAKIM (Firefox) Ras XE VAI TE 

RUE 


<div style="width: S00px; emite 30px: background: blue" eon ememu-myrienmme- 


«menu type-"context" id="mymenu"> 

«menuitem label=" 恢 复 "></menuitem> 

ER Aloe lara" 

«menuitem label="Twitter" type="radio"></menuitem> 
<menuitem label="Facebook" type="radio"></menuitem> 
</menu> 

«menuitem label="AiKHPE"></menuitem> 

</menu> 


</div> 


2.3.2 ”新 的 属性 


1. contextmenu 
在 HTMLS 中 ， 每 个 元 素 新 增 了 一 个 属性 : contextmenu， 它 是 上 下 文 菜单 ， 即 鼠标 右 击 
元 素 会 出 现 一 个 菜单 。 它 配合 menu 标签 使 用 ，contextmenu 的 值 设置 为 menu 的 id 名。 使 用 
这 个 标签 时 要 先 阻 止 浏览 器 的 默认 行为 。 
17 | 
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实战 宝典 
代码 示例 : 


<p contextmenu-"supermenu" id="p-menu"></p> 

«menu id="supermenu" label="dothing"> 

<command label=" tep 1: write Tutorial onclick" dosomerh imag (|) 
-Command label=" tep HO Tutorial onclick: "do ometNingElsSe() T> 
</menu> 


2. contenteditable 

contenteditable Hie 72 77H) 2g RWAN, "EIUS EEAS: 

(1) true: 可 以 编辑 元 又 的 内 容 。 

(2) false: TEMARA. 

(3) inherit: 27K 22 7,24 1] contenteditable 属性 。 

AA Js ETE E75 BIN, CRA true 一 致 。 

当 一 个 元 素 的 contenteditable 状态 为 true Ccontenteditable 属性 为 空 字 和 人 符 串 ， 或 为 true, 
或 为 inherit 且 其 父 元 素 状 态 为 tue) 时 ， 章 味 看 该 元 素 是 可 编辑 的 。 耕 则 ， 该 元 素 不 可 编 
辑 ， 如 图 2-3 和 图 2-4 所 示 。 

代码 示例 : 

<P contenteditable="true" stvyle="width: 300px height: 30px border: 1px 
solid regd;"> 能 编辑 的 文本 段 洲 </p> 


和 编辑 的 文本 段落 


图 2-3 可 编辑 的 文本 (a) 


高 辑 的 段落 


图 2-4 可 编辑 的 文本 (b) 


3. draggable 

draggable ME TUF Ee 17H] DAHER. EX true 时 表示 可 以 拖 搜 ， 值 为 false 时 表示 不 能 拖 
搜 ， 值 为 auto 时 按 浏 览 器 的 默认 行为 来 是。 在 使 用 该 属性 时 ， 还 需要 配合 Javascript 来 实 
现 ， 使 用 dataTransfer 对 象 在 拖 搜 事件 中 传输 数据 。 详 情 参 照 第 4 章 文 件 处 理 与 拖 放 。 

4. dropzone 

dropzone 属性 规定 在 元 素 上 拖 动 数据 时 ， 是 合 揽 贝 、 移 动 或 链接 被 拖 动 数 据 。 它 的 值 
为 copy 时 ， 拖 动 元 素 时 复制 数据 ， 值 为 move 时 不 会 复制 ， 而 是 将 被 拖 动 的 数据 移动 到 新 的 
MEAE, EN link 时 ， 会 产生 一 个 指 问 原 数 据 的 链接 。 

代码 示例 : 


<p id="drag" draggable="true" ondragstart="drag(event)"  dropzone- 
"copy" RE ra oN ER. «/p» 


D 
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o. hidden 
hidden JB EH FZI. — HEH TEETE, WAU ANS EDU PN o 
它 的 值 为 true Iau ze ze n] ILAJ, (EX false E768 EN n] LAY. 
代码 示例 : 


«div hidden style="width:100px;height:100px; background: red; ">123</div> 


6. spellcheck 

spellcheck 属性 规定 是 否 对 元 素 进 行 拼 瑟 和 语法 检查 。 它 可 以 对 以 下 内 容 进 行 拼 写 检 
fr: input 元 素 中 的 文本 值 〈 非 密码 ) ; textarea 元 素 中 的 文本 ; 可 编辑 元 素 中 的 文本 。 值 为 
true 时 进行 检查 ， 值 为 false IAS f - 

代码 示例 : 


“p cContenteditabole true style rates S serena Oo border slip. solid 
red;" spellcheck-2"true"»fRBEZmEBLM Cd BUE /p» 


T. translate 
translate 规定 是 否 应 该 翻译 元 素 内 容 。 值 为 true 时 可 翻译 ， 值 为 talse 时 不 可 翻译 。 
代码 示例 : 


<p translate="no">mAMIZAR. </p> 
<p> 本 段 可 被 译 为 任意 语言 。</p> 


8. 表单 元 素 属性 

表单 元 素 新 添 的 属性 也 可 以 帮 我 们 做 一 些 验 证 ， 例 如 placeholder 属性 可 以 将 光标 定位 到 
fey ARES HUTA. required 属性 用 于 验证 值 是 否 为 宇 、pattern 类 型 专 为 验证 正则 、autofocus 
JR VERT UAIR autocomplete 目 动 完成 属性 等 ， 对 于 这 些 属 性 的 设置 与 效果 ， 请 参照 3.4 
节 表 单 验 证 部 分 。 


24 ”对 于 浏览 器 的 支持 情况 


上 一 市 介绍 了 HTMLS 中 新 增 的 标签 与 属性 ， 这 些 新 增 的 标签 与 属性 对 于 目前 的 主流 浏 


览 器 来 说 ， 文 持 情 况 也 各 不 相同 ， 本 节 主 要 以 表格 的 形式 来 体现 ， 通 过 PC wm CIE. 
Firefox, Chrome, Safari, Opera) 与 移动 端 (Android 和 iOS) 介绍 各 大 浏览 器 对 HTMLS 和 
CSS3 的 文 持 情况 。 

2.4.1 CSS3 属性 


从 图 2-5 中 可 以 看 出 ，text-justify 属性 除了 正文 持 以 外 ， 其 他 浏览 器 都 不 文 持 。 其 他 的 
大 多 数 属 性 ，IE 都 已 经 开始 文 持 了 。 从 图 中 还 可 看 出 ， 对 HTMLS 文 持 比较 好 的 是 Chrome 


a | 


HTML5 
EN c5 


与 Safari， 其 次 支持 比较 好 的 是 Opera 和 Firefox， 移 动 端 中 Android 设备 浏览 器 支持 性 要 比 


iOS 的 更 好 。 
eco0 
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css 属 性 


E 
rm 
m 
[un 


backgound-attachment 4 


X 


= 
DD 


background-blend-mode 
background-position-x 
& background-position- 
y 

border images 
border-radius 
box-shadow 
box-sizing 

Animation 
font-feature-settings 
font-size-adjust 
font-stretch 
font-variant- 
alternates 


font unicode-range 
subsetting 


transitions 


4. 


A JAJA [X IRL |RLIX| «A ee || 之 | 4. 4. aq ES RS RA |a. |. <、 TEO 
[m 


2D Transforms 
3D Transforms 


appearance Le cael 
filter Effects 
repeating Gradients 


TIT PTITEEHE HE E 


X 


cursors:zoom-in & 
zoom-out 
text-justify 
overflow-wrap 
tab-size 
text-align-last 
text-overflow 
text-shadow 
text-stroke 


4. [AIR ajA AX OX | 区 | 人 | 二 人 | 4 4. X |XX jajajajaja] «X [AX 
E 


RR ERU 
li 


2-5 CSS 属性 支持 情况 


2.4.2 CSS 选择 器 


如 图 2-6 所 示 ，CSS3 选择 禹 与 浏 贤 寓 莱 容 情况 表 ， 除 了 1OS 对 ::selection 不 文 持 ，IE11 
对 ::in-range、::out-of-range、:matches 不 支持 ， 其 他 主流 浏览 器 都 已 全 部 支持 CSS3 we Peasy 
性 。IE6 与 IE8 完全 不 文 持 CSS 选择 器 ，IE9 只 有 少 部 分 不 支持 ， 从 IE 的 进步 上 看 ， 可 以 说 
是 TED 拯救 了 网 页 开发 人 员 。 


EM 


HTM L5 Hi TES 

"a S 4 

css 选 择 器 - e © e O € 
| IEG | IE8 | IE9 | IEl1 | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 
::first-letter 
: :placeholder 
::selection 
: :in-range 
: tout-of-range 
:matches 
[foo -' bar’ ] 
[foo$-' bar" ] 
[foo*-' bar’ ] 
-root 
-nth-child X x | 


X 


:nth-last-chiid —————————— 
:nth-of-type 
:nth-last-of-type y E 
EE C a E E E 


TT 
ut 
iil 
Lii 
Lii 
Lii 
Lii 
Lii 
Lii 
TIT 


X 


:first-of-type [x — |x WwW |4 MY — |4 Ww — |4 YY  |4 — | 
slast-of-type — |X — |x — |4 — |4 — 4 yy — |4 —)|4  ]|4  |4 — 


:only-child x x j|4 j|4 34 [|4 j|4 ]|4 ]|4 | 
sonly-of-type — |X — x — |4 — |4 — !4 — |4 | —|4 — J|4 | YY — 


X [X 


empty 
TEES x 
TERP 
‘disabled 
SES 
tee 


图 2-6 CSS 3 选择 器 的 支持 情况 


2.4.3 HTMLS Web 应 用 程序 


如 图 2-7 所 示 ，Chrome 与 Opera 对 Web 应 用 程序 的 文 持 是 最 好 的 ，Firefox 与 Safari 相 
比 ， 多 了 支持 Web Animations API, Web RTC Peer-to-peer Connections, Android 的 支持 情况 
又 比 iOS 的 好 。 从 这 些 浏览 器 对 Web 应 用 程序 的 文 持 情况 这 一 方面 来 看 ， 也 挺 让 开发 人 员 
激动 的 了 。 


Q C O O í 
css 选 择 器 e ”| SZ @ 
| IEG | IE8 | IE9 | IE11 | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 
drag and drop 
TED 
Senn 
本 
API 
web audio API 4 
web cryptography 
web MIDI API 
web sockets 


web storage- 
name/value pairs 
web workers 

web RTC Peer-to- 


peer connect ions 
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X 
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图 2-7 HTMLS5 Web 应 用 程序 的 支持 情况 
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HTML5 


| er 
2.4.4 HIMLS BAAR FJ 


如 图 2-8 所 示 ， 其 中 对 favicons 与 fonts 的 文 持 不 太 好 ， 内 置 Canvas, SVG 和 SVG in 
CSS backgrounds 等 特性 ，Chrome、Firefox、Safari 和 Opera 以 及 手机 端的 两 个 浏览 器 也 基本 
文 持 ， 当 然 ， 正 8 与 IE6 还 是 不 文 持 。 


- e © O í 

css 选 择 器 > © © @ 

| IEG | IE8 | IE9 | IRI | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 

Canvas EE aa S Se 


Canvas blend modes 
y y 


SVG X a E Sl | A E 
SVG effects for 
mmm kp p e p e p e d 


SVG favicons x 

S¥G filters X 

SVG fragment 
identifiers 

SVG in CSS 
backgrounds 

SVG in HTML img 
element 


SYG SMIL animation 
SVG fonts 


TERME 


图 2-8 BAA TKA AH SERE DU 


2.4.5 HTMLS Sih, Um 


如 图 2-9 所 示 ， 对 于 HTMLS 中 的 Audio Element 和 Video Element Wi, Firefox, 
Chrome, Safari, Opera, Android, iOS 都 文 持 ， 但 音频 轨道 、 视 频 轨 道 文 持 不 大 好， 只 有 
Safari 和 iOS 全 部 支持 。 


css 选 择 器 WD 


Audio Element 
Audio Tracks 
Video Element 

C | 


Video Tracks X 


2.4.06 HTMLS 表单 输入 


如 图 2-10 tax, HTMLS 新 增 了 众多 新 的 input 类 型 ， 例 如 DateTime, Range. Number, 


EM 


HTML5 3l: 
Email, URL 等 ， 以 前 这 些 都 是 需要 使 用 JavaScript 才能 实现 的 功能 ， 如 今 只 需要 设置 input 
FARA HAE SEL. Opera. Android 和 iOS 全 部 文 持 ，Chrome、Firefox 和 Safari 都 文 持 一 部 
分 ，IE 家 族 则 基本 不 文 持 。 


全 的 A 
css 选 择 器 e © © © O @ 


ETE NR Ek ee a a ORE METN 
X |x 04 


Form:Search yv w wy ee i ee 
Form:Phone 
Form :URL x — [x [xv 


X 


Form:Email x — IX |x |¥ |v |v |4 |v iv |v | 


Form:DateTime 
Form:Date X X 4 4 
Form:Month 
Forn:Week x x x x 
Form:Time x x x 
Form:LocalTime x x 
Form:Number x 
Form: Range 


图 2-10 HTMLS 表单 输入 的 文 持 情 况 


2.4.7 HIMLS 表单 属性 


HTMLS 表单 属性 也 是 对 表单 功能 的 重要 改进 ， 简 化 了 Web 应 用 开发 。 如 图 2-11 所 
示 ，Autocomplete 所 有 的 浏览 器 都 支持 ，Firefox 对 Min, Max 和 Placeholder 属性 还 是 不 支 
持 ， IE 又 是 基本 不 文 持 。 


f 3 , 
css 选 择 器 > etc O ed 

| IEG | IE8 | IE9 | IEl1 | 45 | 50 | 9.1 | 36 | 47 | 9.2 | 
autocomplete 
autofocus 
list 
placeholder 
min 
max 
multiple 
pattern x x x vv 
required x Ix x vy YY we ]|4 |y |4 | j| 


图 2-11 HTMLS 表单 属性 的 支持 情况 


以 上 这 些 就 是 主流 浏览 器 对 HTMLS 和 CSS3 的 文 持 情况 ， 各 个 浏览 器 还 在 对 文 持 它们 
的 技术 在 做 改进 ， 可 能 大 家 在 看 到 这 本 书 时 ， 文 持 情 况 会 有 变化 ， 恋 者 可 从 网 络 上 获得 最 新 
的 文 持 情况 。 
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31 表单 新 控件 详解 
3.2 构建 表单 用 户 界面 
33 表单 验证 

3.4 ”注册 和 登录 实战 


HTML5 表单 新 功能 一 一 注册 和 登录 验证 实战 

在 HIML 4 中 ， 实 现 表单 信息 的 录入 需要 用 到 的 标签 有 input 标签 、select 标签 、option 
标签 、textarea 标签 、label 标签 等 ， 通 过 input 的 type 属性 可 以 调整 输入 框 的 类 型 。 在 HTML 4 
中 提供 了 “text”“password”“Tradio”“checkbox”“submit” 等 ， 这 些 表 单 控件 提供 了 不 同类 
型 的 功能 ， 但 是 一 些 数据 的 验证 工作 还 需要 结合 Javascript 等 脚本 语言 来 实现 。 

HTMLS 中 的 元 素 和 特性 提供 了 更 加 强大 的 语义 标记 ， 其 中 关于 表单 的 修改 令 人 眼前 一 
渤 。 其 中 有 很 多 特性 功能 都 非常 实用 ， 比 如 可 以 像 在 Word 里 面 一 样 通过 色 板 选择 某 种 颜色 ， 
或 者 直接 选择 一 个 日 期 。 此 外 ， 还 有 一 些 非常 好 用 的 属性 ， 比 如 单 击 清除 的 属性 ， 正 则 验证 属 
性 。 虽 然 在 不 同 的 浏览 器 上 的 支持 各 有 人 不同 ， 但 是 这 些 狐 功能 还 是 很 值得 我 们 去 学 习 。 

本 章 内 容 包 括 : 

3.1: 关于 表单 新 的 控件 类 型 的 详细 介绍 ， 包 括 form 标签 与 input 的 标签 的 新 写法 ， 
email 输入 类 型 、url 输入 类 型 、 日 期 相关 输入 类 型 、time 输入 类 型 、range 输入 类 型 、search 
输入 类 型 、color 输入 类 型 、datalist 标签 等 。 

32: 结合 HTMLS 表单 特性 ， 制 作 一 个 登录 页 面 和 一 个 注册 页 面 。 

3.3: 了 解 新 的 表单 验证 功能 和 属性 ， 如 autofocus 属性 、placeholder 属性 、autocomplate 
属性 、novalidate JE. multiple 属性 、required 属性 、pattern 属性 、autocomplete 属性 等 ， 
并 且 将 这 些 属性 添加 到 我 们 所 写 的 页 面 中 。 

3.4: 完成 一 个 完整 的 登录 注册 设计 流程 。 


3.1. 表 里 新 控件 详解 


3.1.1 新 的 表单 结构 


HTMLS 中 的 表单 结构 变 得 更 加 自由 ， 原 和 完 在 HTML4 中 所 有 的 表单 内 容 都 得 在 一 对 form 
标签 中 ， 类 似 于 这 样 : 


<form action-"" method-"post"» 


a a A 
< 


在 HTMLS 中 表单 控件 完全 可 以 放 在 页 面 中 的 任何 位 置 ， 然 后 通过 新 增 的 form 属性 
指 问 控件 所 属 表单 的 id 值 ， 即 可 关联 起 来 。 这 样 代码 的 自由 性 就 会 更 高 了 ， 类 似 于 下 面 
这 样 : 


Form id- myr orm S Torm 


<input type- “text rorm= myi oim 9 valus= "> 


3.1.2. ”新 增 type 属性 


接 下 来 ， 我 们 来 认识 一 些 新 增 type 属性 : 


HTML5 
| her 

1. email 输入 类 型 

说 明 : 此 类 型 要 求 键 入 格式 正确 的 Email 地 址 ， 否 则 浏览 坪 是 不 允许 提交 的 ， 并 会 有 一 
个 铺 误 信息 提示 。 此 类型 必须 指定 name 值 ， 合 则 无 效果 。 

格式 : <input type=email name=email> 

错误 效果 展示 (Firefox) 如 图 3-1 所 示 : 


| asd | Tue er ih] 


ida: ^ FEET REESE, 


图 3-1 
正确 格式 展示 (Firefox) 如 图 3-2 所 示 : 
sxuek@qq.com| 提交 查询 
图 3-2 


2. URL 输入 类 型 

说 明 : 此 类 型 要 求 输 入 格式 正确 的 URL 地 址 ， 否 则 浏览 器 是 不 允许 提交 的 ， 并 会 有 一 
个 错误 信息 提示 。 此 类 型 必须 指定 name 值 ， 人 否则 无 效果 。 

格式 : <input type=url name=url> 

错误 格式 展示 (Firefox) 如 图 3-3 Bras: 


| asd| 提交 查询 


请 樟 入 一 个 URL, 


图 3-3 
正确 格式 展示 (Firefox) 如 图 3-4 所 示 : 


http://www.sxuek.com|| fracti 
K| 3-4 


3. 时 间 日 期 相关 输入 类 型 

说 明 : 时 间 日 期 相关 输入 类 型 这 一 系列 表单 控件 提供 了 丰富 的 用 于 日 期 选择 的 表单 样 
式 ， 包 括 年 、 月 、 周 、 日 等 。 只 和 需要 一 行 代码 就 可 以 实现 交互 性 非常 强 的 效果 ， 但 遗憾 的 是 
目前 在 Windows 系统 下 仪 有 Chrome 和 Opera 支持 这 个 类 型 。 

格式 : <input type=date name=my_date> 

效果 展示 〈Chrome) 如 图 3-5 所 示 : 
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HTML5 表单 新 功能 


2016/A/A x > ¥| | 提交 | 


20152208 A = 4 {| @ || + 


图 3-5 


格式 : <input type=time name-my time» 
效果 展示 (Chrome) 如 图 3-6 Wr: 


€ jx 


图 3-6 


格式 : <input type=month name-my month» 
效果 展示 (Chrome) 如 图 3-7 所 示 : 


年 -月 $T ™| GER | 


2015:E08H + | @ || > 


图 3-7 


格式 : <input type=week name=my week> 
ER EAS (Chrome) 如 图 3-8 Arm: 


SS ae 


20153508 + i|| || + 


周一 JL B= 局 四 AA Ar RIE 
1 2 
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图 3-8 
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HTML5 
| — ETE 
格式 : «input type=datetime name=my_datetime> 
经 测试 ，datetime 28 AY CE EAA DM Wiss FABIO BR o 
格式 : <input type-datetime-local name=my_localtime> 


选取 本 地 时 间 ， 效 果 展 示 〈Chrome) 如 图 3-9 所 示 : 
ASE —:— 
2015 年 08 月 + 4 || = | | 上 


周 A BI AN 周 五 BEA AA 


4. number 输入 类 型 

说 明 : 用 于 输入 一 个 数值 ， 可 以 通过 属性 设置 最 小 值 、 最 大 值 、 数 字 间 隔 、 默 认 值 〈 了 下 
不 文 持 )。 

格式 : <input type=number max=10 min=0 step=1 value=5 name=number> 

max: 规定 允许 的 最 大 值 ; 

min: 规定 允许 的 最 小 值 ; 

step: 规定 合法 的 数学 间隔 ; 

value: 规定 默认 值 ; 

效果 展示 (Firefox) 如 网 3-10 所 示 : 


5| = ||| 提交 查询 
图 3-10 


5. range 请 块 类 型 

说 明 : 和 前 面 的 number 美 似 ， 只 不 过 这 里 是 用 滑 块 展示 ， 如 条 是 在 移动 端 展示 的 话 ， 
给 用 户 的 体验 会 比较 好 。 

格式 : <input type=range max=10 min=0 step=1 value=5 name=val> 

max: 规定 允许 的 最 大 值 ; 

min: 规定 允许 的 最 小 值 ; 

step: 规定 合法 的 数学 间隔 ; 

value: 规定 默认 值 ; 

效果 展示 (Firefox) 如 图 3-11 Pra: 


EM 


HTML5 表单 新 功能 注册 和 登录 验证 实战 
提交 查询 | 
图 3-11 


6. search 输入 类 型 

说 明 : 此 类 型 表示 输入 的 将 是 一 个 搜索 关键 学 ， 通 过 设置 results=s 可 显示 一 个 搜索 小 
图 标 。 

格式 : <input type=search result=s> 

AMR EAS (Chrome) 如 图 3-12 Pra: 


| 提交 
图 3-12 


7. tel 输入 类 型 

说 明 : 此 类 型 要 求 输入 一 个 电话 号 色 ， 换 行 符 会 从 输入 值 中 去 反 。 因 为 不 同 国家 不 同 地 
区 的 电话 号 但 差别 明显 ， 所 以 想 要 添加 更 多 限制 可 以 使 用 下 一 下 会 讲 到 的 pattern 等 属性 。 

格式 : <input type=tel> 

8. color 输入 类 型 

说 明 : 一 个 非常 禾 酷 的 效果 ， 并 上 且 在 最 狐 的 Firefox, Chrome. Opera 浏览 器 中 都 文 持 ， 
可 让 用 户 通 过 闫 色 选 择 器 选择 一 个 闫 色 值 ， 以 十 六 进 制 保存 ， 可 以 通过 value 访问 到 ， 并 且 
WD Axe XH 

格式 : <input type=color> 

WN eS (Chrome) 如 图 3-13 所 示 : 


色调 (E): 160 | 红 (R): 0 
饱和 度 (S): 0 (G): 0 
MEST URE REO) xy [0 | gu: 
取消 添加 到 让 定义 闫 色 (A) 


图 3-13 
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3.1.3 ”新 增 表 单 标签 


HTMLS 中 新 增 的 表单 标签 如 下 : 

1. datalist x 

WHH: datalist 元 系 规 定 输入 域 的 选项 列表 。 

列表 是 通过 datalist 内 的 option 元 系 创 建 的 。 

如 需 把 datalist 绑 定 到 输入 域 ， 用 输入 域 的 list 属性 引用 datalist 的 这 。 列 表 当 中 的 value 
属性 是 必须 的 ， 新 版 本 的 Chrome 和 Opera 支持 该 属性 。 

格式 : 


<Imeue | tyoe="texe" laist—"my list" placenolder—" 70 |) ae tH 7 7 
name="Seniority"> 

SOE lise ac “ah, Lagu 

some omnee look” value “MTM O SEE Hn 

<option labe l="Top-" value-"HTML5 Siki Hn 

sse onmlsb ei om. value="HTML5 2k Hn 

«/datalist» 


NER eS (Chrome) 如 图 3-14 所 示 : 


HTML5 实 战 宇 典 Tor 
HTML =s8 Tope 
HTML5 实 战 宇 典 Top: 


图 3-14 


2. keygen 标签 

说 明 : keygen TRAH Eet POSUER J^ HJ Ay aE 

keygen 7u3& EBA Eas MELLRE EN, SERATE, EMH AS 
铀 。 私 钥 存 储 于 客户 内 ， 公 钥 则 农 发 送 到 服务 硕 。 公 钥 可 用 于 之 后 验证 用 户 的 各 户 几 证书。 

格式 :用 户 名 :<input type="text" name="my_name" /> 

加 密 :<keygen name="security"> 

效果 展示 (Chrome) 如 图 3-15 所 示 : 


HP: AE: 2048 :高 强度 } "| | dm 
图 3-15 


3. output 标签 


WHH: output 用 于 计算 结果 的 输出 ，Firefox、Chrome、Opera 都 文 持 此 标签 。 
格式 : 


EM 


HTML5 表单 新 功能 一 一 注册 和 登录 验证 实战 
mam 
// 页 面 加 载 完 成 后 执行 
window. onload=function() { 
/ / 3833 id FRNA PUR 


var number- document.getElementById('number'); 

var total-document.getElementById('total'); 

// 添 加 失去 焦点 事件 

number.onblur=function() { 

// 计 算 总 价 利用 单价 乘 以 数目 

var totalprice-parseInt (document.getElementById('price').value)*parseInt 
(this.value) 

// 将 结 采 得 出 

total values total price; 

j 

} 

«ui exene rp 

<body 

Soon eron M 

Bp inpor eye rece) EL DIE IO! Tio a i mere e lepore ere b 

ay Al:<input type="text" placeholder-" Wi AXE "id="number"> 

NO c= total! —/ omepur— 

<<) EGRE 

ao > 


MRE (Chrome) 如 图 3-16 所 示 : 


ET EUN | BB | 总 价 :60 


| 3-16 


3.2 TJ ZEE FH PATE TRI 


在 本 节 中 将 结合 HTMLS 来 制作 一 个 注册 页 面 和 一 个 登录 页 面 。 


3.2.1 注册 页 面 


C1) 首先 完成 表单 背景 的 制作 ， 给 表单 添加 一 个 背景 样式 ， 读 者 目 己 定义 即 可 。 


-div Glass— oq > 
«Ul Claw = 


(2) 将 整个 表单 分 为 三 个 fieldset 字段 组 ， 分 别 表示 账号 信息 ， 个 人 信息 和 联系 方式 ， 
最 后 还 要 加 上 拓 交 按钮 如 图 3-17 所 示 。 


<div class="bgv> 


m | 


HTML5 
er 


-form ace lon" method=" posi 
<fieldset> 
EN | «/legend» 
</fieldset> 

<fieldset> 
eaae dde disi S legend 
</fieldset> 

<fieldset> 
<legend>IKA 7 XX«/ legend» 
< lt > 

< 

> 


联系 方式 


图 3-17 


(3) 第 一 部 分 账号 和 密码 。 一 般 在 注册 的 时 候 密 码 需 要 确认 ， 所 以 这 里 写 两 个 密码 
输入 框 。 

我 们 把 整体 结构 分 为 左右 两 部 分 ， 左 边 的 div 里 放 label 标签 ， 右 边 的 div 里 放 input 标 
签 ， 右 边 可 以 留 出 一 片区 域 ， 用 于 放 一 些 提 示 文 字 。 表 单 用 text 和 password RAY WE AY LA. 


«legend»llk (8 B</legend> 

<div class=" left- 

a tor—"accoune Nacsa label 

<7 dary 

“olive yells vao lou 

GUMOULE dox pe ^ tede v qe COUN 

<!-- 账 号 的 输入 框 采用 普通 的 text 类 型 就 足够 了 -> 

<div class="notice"> 请 输入 8 位 数 长 度 字 符 串 ,可 包括 数字 、 小 与 字母 或 者 大 写字 母 ， 不 
REMAT S </div> 

T 
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<div class="left"> 
e aa el 
<!-- 密 码 输入 框 一 般 采 用 上 type=password 这 样 输入 的 内 容 就 会 由 实心 圆 代 替 --> 
< clave 


< — 1 leone 

Se Pac word nome Sesso cO - 9E So > 

Ao abe 

<div class 下 和 下 

abel or "OOS wor TN el 

</div> 

alque edicion 

<input type="password” name="my password2" id="password2" > 

«div class-"notice"»ZE BJ RBS ENDE EAR. WEBNS, FERRARA 
~A </div> 

T 


TEXX URAC RAPER S, PY DAI RRR, YA “MR Pa 


a Riu t HOCUS (oul le lox solid wed: | 


这 里 还 可 以 结合 JavaScript， 当 东 个 表单 控件 获得 焦点 时 ， 将 显示 后 面 的 提示 文字 如 网 3-18 
BIAS 


window. onload=function() { 

/ /获得 账号 表单 控件 的 引用 

var account-document.getElementById('account'); 
/ /获得 提示 文字 的 引用 

var notice-document.getElementsByClassName('notice!') 
// 账 号 控件 获得 焦点 的 时 候 触发 的 事件 

aceoumn ES GU fO CIUS TEE RE XT 

// 获 得 焦点 的 时 候 提示 文字 变 为 显示 状态 
notuoeelO0l sry le rdisplay—"bilock” 

} 

// 账 号 控件 失去 焦点 的 时 候 触 发 的 事件 

aCCou om Te mde 

// 失 去 焦点 的 时 候 提示 文 字 变 为 隐藏 状态 


noticelOl.style:display "none" 


mw [ — | 


图 3-18 
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(4) 第 二 部 分 个 人 信息 ， 包 括 姓 名 、 年 龄 、 出 生日 期 、 性 别 。 在 这 里 用 到 text, 
number, date, radio 等 类 型 ， 代 码 结构 与 第 一 部 分 大 致 相同 如 网 3-19 所 示 。 


人 

<div class="left"> 

Leigel or eines Wh a alse > 
selves 


ene em eb 

Ee Ceo ewe mma ai com 

«Ul alis 

Tea Ye 

人 

<div- 

<div ellae "Elo > 

em er mm ie es exor rebas O ines DIS > 
<!-- 年 龄 这 里 设置 为 number 类 型 最 小 值 设置 为 0 最 大 值 设 置 为 99--> 
<7 Gay 

<div classo T leri" 

< er ee a ame 

ll 


< Cv lo I > 

ee eue" mn me ee > 

<!-- 出 生日 期 使 用 data 控件 是 再 合适 不 过 的 了 可 以 很 方便 地 选取 日 期 --> 
<<) Cline 

<div class ene 

«label»TEJl:«/label» 

e/a 


<div, Glass—i right’. 

< ae type="radio" name-"my sex" value="boy" ></label> 
el ne meme mm See" weder» S</ eee l= 
«UA Bs 


个 人 信息 


图 3-19 


(5) 第 三 部 分 包括 手机 和 号码 和 电子 邮件 ， 在 这 里 用 到 tel 和 email 类 型 如 图 3-20 所 示 。 


<legend> 联 系 方式 </legend> 
<div class="left"> 


EM 
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<label ror=" pensi 7) label — 

SACR 

<div @lass—"rE rghit) 

aC VOSS eel nom ESI gl el 
<!1=--=- 电 话 号 但 这 里 使 用 tel 控件 PIN ANS ih E--- 
se Gay 

<div class="left"> 
IE 

oa 

onec mS 

amos xe ewe" mewe-"wus Cie sob II Ne 
<!-- 电 话 号 码 这 里 使 用 email 控件 暂时 不 添加 其 他 验证 --> 


«ch 


EVE: 请 输入 手机 号 码 .… 


电子 邮件 : 请 输入 电子 邮件 -… 


图 3-20 


(6) 在 最 后 添加 一 个 提交 鬼 钮 。 


Gillie cioe use ia Wel wea e a 
附 : 完整 的 CSS 样式 。 
/* 清 除 body 以 及 一 些 控 件 的 默认 边 距 属 性 设置 基本 的 文字 属性 */ 


bos > input, textarea, select optroni 
padding:0;margin:0;font-family: "TER"; 
font srze: p 

} 

a RNR, RE see WIDE O3 KAA / 
HOG: | 

width: 100p; hergnt: auto margin: 0 auto, 


Dackoround ur MPa- Po paddamg lO adnno Cop; 
Dackground s128: COn Lent, 

| 

/* 设 置 所 有 左 侧 控 件 名 称 部 分 样式 */ 


-left{ 
wdth 170p: herght: S00ox loati lert, 
text-align: night, lume-herght »s0px;mergium: tps Or padding- 


r igne: OP Color: ct 
} 
/* 设 置 所 有 右 侧 表单 控件 及 提示 文字 容器 样式 */ 
| 
有 


} 
35 | 
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/* 设 置 所 有 右 侧 提 示 框 样式 */ 
sroght nobrce! 
由 
Tont Salve sal oy eda ear eaoidust | OX odia eaae oie 


display: none; 

| 

/* 设 置 字 段 标题 样式 */ 

legendí 

codo o 0m ze id 

} 

/* 设 置 字段 组 样式 */ 

fieldset( 

border lox solid +555) nire lee pbinbeto X98 OTt e 0px; 

} 

/* WE label HAA 

labelícolor: ii i 

/* 设 置 表 单 控件 的 基本 样式 */ 

a | 

vule 2000x daas olas 0p border: lox Sool + 

pox- shadow: O0 2p: Ip: tial inset; Pidding Jefl .200x eq ical align: 
middle; 

} 

/* 设 置 表单 控件 获得 焦点 通过 验证 时 的 样式 */ 

LN OWNER were LS! e zelo e | 

oue line: lox 7s olla bile: 

} 

/* 设 置 表单 控件 获得 焦点 未 通过 验证 时 的 样式 */ 


Input- ro Us- iv 


cüt ine: Ip Sol re red; 

j 

/* 设 置 单 选 控件 的 样式 */ 

vere [Mamie Sex| | 

width: -0px height: hap x > Lane height: Sp» 
border:0;border—-radius:0; box-shadow: none; 
outline: mone In Oran, 

} 

/* 设 置 提 区 按钮 的 样式 */ 

"quote. [Deme em 
width: OOo text depo eenter Pad no 0 
display: blockmaroin: 0px wale? Dackoround:HEorDEE: 
| 


3.2.22 SRA 


SEM UI, Ai Ai SA eA AE, RAS IE Store fee Al — “MF eB n] VJ 


EM 
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了 如 图 3-21 所 示 。 


«form action="post" id="my_ form"></form> 

<div class="left"> 

Allaisell douce accomae” Slice < el 

«uU oasis 

"Solus e le ue dni > 

SV Ed mm 

<div class="left"> 

<label for "accoun 25e A eds 

o e 

< le 

rR Oey eO OA 

selves 

<div, class—" UPC 

<input ope e ONE co! Welle Sse" name lee ial 
<input ype “submit” value= a name sioni 
«f obse 


账号 : | 请 输入 账号 


附 : 完整 的 CSS 样式 。 
/* 清 除 body 以 及 一 坚 控件 的 默认 边 距 属性 设置 基本 的 文字 属性 */ 


body, input, textarea, Select, option, 
padding:0;margin:0;font-family: "TONER"; 
tont-srzesT4Dxs 

} 

/* 设 置 整个 背景 的 样式 */ 

.boxt 

uncle» 00r c hewohe- 00px background uri (ba. ILI) mare mm: 


auto; background sIze: Content: 
} 
/* 设 置 所 有 堪 侧 控件 名 称 部 分 样式 */ 
-left{ 
widhi: 120p: = avenue ales db 010! 9c toat lert; 
line- height: l00px: text-align: right; 


3 | 
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padding rige: (0 open eode «eine 

} 

/ KAMA C DURS ERU EE / 

| 

widrh: S00 Tren L000x loati left; 

line height? 100px; 

} 

/* 设 置 按 钮 容器 的 样式 */ 

mons E 

ele lies 00px eno: 100p; text align: c enler; line heighi: TOOP: 

} 

/ CELER RTEBIEEXX / 

DEDE, 

wlioel Igiene 30]: border: 1o oem ee cop. 

box-shadow: 0 2px lox fada seco» cte mox ens ical align: 
middle; 

| 

/ * USC PEAS YE UAE AE ZK / 

input [name=login], input [name=sign] { 

width: 100px height: 0m acl eu cho fir hs 

Padding: 0 Tae orae we ghi: bold, 

CUr- Om: os 

} 

/* 设 置 提交 和 注册 按钮 被 单 击 时 的 样式 */ 

input [name=login] :active, input [name=sign] :activef{ 

box-shadow: none; 


SEAN SOR TUTE TEMS BERAWA P Wo] HTMLS 表单 的 新 的 验 


证 属性 和 其 他 的 一 些 功能 ， 从 而 让 表单 功能 更 加 完善 。 


3.9 REMUE 


HTMLS jelk f REWER np ELTE] SERE TERR IST HOD ALEEIRUES , d np EAS JI 725 
正则 验证 。 际 此 之 外 ，HTMLS5 还 提供 了 一 些 非 党 好 用 的 天 于 表单 操作 的 独 功 能 。 


3.3.1 表单 控件 中 新 增 的 功能 属性 


1. autofocus 属性 
说 明 :， 当 页 面 加 载 时， 自动 聚焦 到 某 一 个 表单 控件 上 。 值 为 Boolean 类 型 ， 一 个 文档 中 
只 能 有 一 个 表单 控件 具有 此 属性 。 


格式 : <input type="text" autofocus="true"> 


EM 
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2. placeholder 属性 
说 明 : 这 是 一 个 非常 好 用 的 属性 ， 它 会 展示 一 段 提 示 文 字 ， 当 单 击 输入 时 ， 残 会 目 动 隐 
jk, PANTI X AIER. 
格式 : <input type="text" placeholder=" 请 输入 账号 "> 
3. novalidate 属性 
说 明 : 此 属性 定义 form RARA input 标签 被 提交 时 不 用 经 过 表单 验证 。 


格式 : <input type="text" novalidate="true"> 


4. autocomplete 属性 

用 于 指示 input 7628 22 f BETA SERUM, OR SERVE E EH 2 V d APE. XX 
个 设 定 可 以 被 属于 这 个 form HJ T 7628 HJ autocomplete JE VEE gi o 

off: 在 每 一 个 用 到 的 输入 域 里 ， 用 户 必 须 显 式 的 输入 一 个 值 ， 或 者 document 以 它 自 己 
的 方式 提供 目 动 补 全 ; 浏览 器 不 会 日 动 补 全 输入 。 

on: 浏览 器 能 够 根据 用 户 之 前 在 form 里 输入 的 值 目 动 补 全 。 

格式 :<input type="text" autocomplate="on/off'> 

5. multiple 属性 

说 明 : 给 定 输 入 域 中 可 以 选择 多 个 ， 一 般 用 在 上 传 文件 或 者 提交 电子 邮件 地 址 的 时 候 ， 
^ BL EHHE S BT. 

格式 : <input type="email" multiple="multiple"> 


3.3.2 FBSA AS see TE 


1. required 属性 
说 明 : VERTEBRAE ATS, ATU NAB PE AS Hu Uds E EZ 


格式 : <input type="text" required="required"> 
效果 展示 (Chrome) 如 图 3-22 所 示 : 


| || 提交 查询 


请 填写 此 字段 。 


图 3-22 


2. pattern 属性 

说 明 : 此 类 型 为 正则 验证 ， 可 以 完成 很 复杂 的 验证 。 

格式 : <input type="text" pattern-"^[0-9] {5}$"> 

CSS3 中 也 有 关于 表单 验证 的 伪 类 ， 比 如 说 能 够 验证 成 功 的 添加 伪 类 :valid。 验 证 不 成 功 的 


添加 伪 关 :invalid。 


ALP OWNS oe: ya sire 
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eut ames lox solid plue; 
} 

LO: TOUS Tio el 
out hine: Ip solidi red, 


} 
效果 展示 (Chrome) 如 图 3-23 Br: 


123456 Erg 


请 与 所 请 求 的 格式 祭 持 一 数 。 


图 3-23 


3. min 和 max 属性 


WHH: min 和 max 用 于 数值 类 型 的 表单 验证 ， 限 制 用 户 输 入 的 最 大 值 和 最 小 值 ， 


格式 : <input type="number" max="10" min="5"> 
NR HÉz« (Chrome) 如 图 3-24 所 示 : 


1 | | 提交 | H8 © cea 
BESRA TRST 5, 值 必须 小 于 或 等 于 10。 
图 3-24 


4. step 属性 

说 明 : step 控制 数值 输入 时 的 步 幅 。 

格式 : <input type="number" min="0" max="100" step="10"> 
效果 展示 (Chrome) 如 图 3-25 所 示 : 


10| =| | x 


图 3-25 


属性 值 


将 这 些 验证 规则 对 应 的 放置 到 上 一 节 写 好 的 表单 控件 中 ， 一 个 表单 验证 提交 的 页 面 融 完 


成 了 。 
如 : 在 电话 号 人 码 验 证 中 可 以 使 用 required 和 placeholder, pattern 等 属性 。 
< me type="tel" mene ie id="tel" requrlEd="repuired" 
placeholder- “Has cn Setter (0-9) Nem 


在 年 龄 的 验证 中 可 以 使 用 min 属性 、max Jag PE. required 等 属性 。 


nn qed 


"required"> 


最 终 界面 如 图 3-26 和 图 3-27 所 示 : 
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EL 3-27 


表单 新 增 的 验证 属性 可 以 帮助 我 们 更 快 地 完成 表单 验证 工作 。 本 书 附 录 B 中 还 提供 了 更 多 
天 于 这 些 属性 的 介绍 。 在 下 一 节 中 ， 我 们 将 结合 本 地 存储 ， 完 成 完整 的 登录 注册 过 程 。 


3.4 注册 和 登录 实战 


在 本 节 中 将 结合 后 人 台 PHP 和 数据 库 完 成 一 个 完整 的 登录 注册 功能 ， 运 行 环境 使 用 的 十 
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实战 宝典 
Wamp 集成 环境 ， 关 于 这 部 分 的 信息 读者 可 以 参考 本 书 附录 C. 
首先 是 HTML 布局 部 分 。 
登录 页 布局 部 分 : 


<!doctype html> 

<html lang="en"> 

<head> 

<meta charset-"UTF-8"» 
«title» SX Wu «c/title» 

<style> 

body, input, textarea, Selecot option] 
padding:0;margin:0;font-family: "TUER"; 
[onu Ic 

} 

Sere» 

widi n. 5:010 TOC 

height: 200px; 

Dacko ound: wie IL DI ee 

margin: 0 auto, 
baekareoume esee omen 

| 

e EE 

widi: 20px he gnt eee loai be EID 
line-height: 530px;text-align: do 
Padding rie: Op ol or; 

} 

et Oe 

wideh: 00px helighet: Ono sem o cues m ie 
line-height: s0px, 

} 

ne ont 

Wachee 500 5e height: Op ext en cmm C enc T ume helgir: 100p: 
} 

| 
机 
box-shadow:0 2px lpx #aaa inset; 
padding teme Dx 

vertical align:middle; 
border—-radiue: DD 

} 

input [name=login], input [name=sign] { 
WE T000: dale latere S00 Dac kor ound jie itie G 
Badding'0font weight:bold; 

Gum Son pnt 

| 


input [name=login] :active, input [name=sign] :activef{ 
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box-shadow: none; 
} 
</style> 
</head> 
“Dody 
Corm action aaeere vord (O Ed nm ormi orm 


<div class="box"> 

de 

e "ome lel 

</div> 

alque eiie scm eb 

We placeholder="ia@#iAMKS" autofocus-"true" 
gol seco 

«JJ Claw 

Sob vedere Jede 

«Iberoxedie eie ll 

«c Br 

we 

ne Wn eer a E > 

< 

<div SS Uo 

I ee a ON ie Oren ES 

<imowe tvyoc=omerom! wellness a E Tor iby CIE o 

«eU obi 

x elbow 

</body> 

E ema 


AAU] 3-28 rz: 


图 3-28 


注册 页 布局 部 分 : 


soleret we en > 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
Sea ele PS Ate 
<style> 
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body, Input, textarea, select, option] 
padding:0;margin:0;font-family: "TUER"; 

tont size: lp; 

| 

-bg{ 

wideh: e Ono sehe mete = erste rm ats coepi Oe auto, 

Dackoround: url (bPa ly Padding: lO x ead imna T): 
Þackground size:content, 

} 

| 

wl he V Ops nn 0p; loat SIDE 

Ex alion Fale me inteso us elTe ee nr Op oa riolt: SO IOS Colom: Hi, 
} 

tele 

width: 4 ox bre mbeatp S Oops e cup lert mar uem lOp Oline height: (nod 
} 

Light .1oc Lee, 

alee lars 0px re lit 5 0ps ie e ctm rigar; 

tont sizo: lp; lince heihi: IL x oolor: 90/05 
display:none; 

} 

legend{ 

Color ones 

} 

fieldset { 

Border ox colid +555) Maen bortom: 0px; 

} 

kale colon t det 

a | 

wl -220px meneme: 0px Dorder: Ilion olid oo; 

box shadow: O 2px lpx taaa inset; padding left:20px/ vertical align: middle; 


Border radius: lo px; 
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j 
We eesnm ma 
oie closet Oros eos ou lon s (e Tec qe cole poner 
display:Dlock;/margin:l0px auto; background: mS 
</style> 
</head> 
Pon 
<div class Dg" 
-form aceon ava ripe vold (MU e mer ods "Dose > 
<div class lee 
Tabel ows aeea SMe ee p e Mose d 
s clip 
< Cl elias s—a ra > 


<input type="text" name-"my account" id-"account" placeholder-" iB 4a A Jk 
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natern aa ZA ZO ONl9 Ss" autonocus—" ere" required—"reamared” autocomplate= 


Mist 


«div class="notice"> 请 输入 8 位 数 长 度 字 人 符 串 ,可 包括 数字 、 小 写字 母 或 者 大 写字 母 ， 不 
能 输入 符号 !</divVv> 

</div> 

<div class="left"> 

Tbb or "Sl ms label 

«dre hb 


<div -ellass—" right’. 

GIOVE IC WO MCI MM Wr er OS wr ecu ie re > 

«SU OBS 

<div class lemn. 

abe o aS wr mx label 

«Uf Clue 

som Class— Tio. > 

ecce nom na sw Se Pass "Obes cnm came 

«div class-"notice"» HERRIGS Ze, E eE, FARA RO dLA 
—St«/div» 

«uh claw 


«input type-"button" name-"my submit" value="e70"> 
om 
cree se 
<< lovely 
<< lagen 


效果 截图 如 图 3-29 所 示 。 


A 


图 3-29 


在 js 部 分 主要 是 利用 表单 验证 和 ajax 验证 结合 ， 对 于 必 填 字段 和 输入 格式 进行 验证 ， 
以 及 对 于 账号 是 盏 重复 与 数据 库 中 的 数据 进行 验证 对 比 。 
// 获取 要 操作 的 元 素 


var account- document. queryselector (Tkaccount"),; 


var passwordl=document.querySelector ("#password") ; 
var password2=document.querySelector ("#password2") ; 
var MoOrNCe—-dOCcUMentL., (UCD YSeleCcEOrAlLIN™  notuce”') > 
var form=document.queryselector ("form"); 


Var submit-document.qgueryselector ("type=submit"); 
d 账号 获得 焦点 是 显示 提示 框 
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accoune-onrocus—ituncre vom |) | 

moOemce (Oise ylew dis plav Merle eu 

j 

// 账号 内 容 改 变 并 失去 焦点 的 时 候 判 断 账 号 是 否 重 复 
account, Omehange—rumec Eom () | 

// 获取 账号 内 容 
var user=account.value; 

// 实例 化 ajax 对 象 
var xhr=new XMLHttpRequest (); 
// WOE ajax Wak 
xpo OPen (“POST electo 
// 发 送 头 信息 
xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); 
// 发 送 请 求 
xhr.send("user="+user) ; 
// 检测 ajax 状态 改变 
xhr.onreadystatechange=function () { 
// 当 啊 应 完成 时 
if (xhr.readyState==4) { 
// 当 啊 应 成 功 时 
if (xhr.status==200) { 
/ /接收 啊 应 的 结 
var text=xhr.responseText; 
// WR ARA O UHRA 4 DR 
if (text==0) { 
// 显 示 错 误 提示 
有 ee Clock 
notice[0].innerHTML2"iZ HP 44 p oR" 
/ /禁用 提交 按钮 


submit.disabled=true; 


}else{ 

// 否则 验证 成 功 

// 隐 藏 错误 提示 

monec style. cdm spia ne 

notice[0] .innerHTML=" 请 输入 8 位 数 长 度 字 符 串 ,可 包括 数字 、 小 写字 母 或 者 大 与 字母 ， 
不 能 输入 符号 1" 

// 恢 复 表 单 按钮 


submit.disabled=false; 


} 
} 
} 
j 


} 


PasswordZ ,onchange—1uncrion () 4 


/ / RG NET i 
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var pwl-passwordl.value; 
/ / RR RESIN A 
var pw2=password2.value; 
// 如 果 两 次 输入 不 相同 
if (pwl!=pw2) { 
// 显 示 错 误 提 示 
un stylescn eplav block”; 


submit.disabled=true; 


}else{ 

// 人 否则 隐 茂 错误 提示 

mot Loel lI ose lke] Ji -play "none"; 
submit.disabled=false; 

j 

j 
// 表单 提交 之 后 将 数据 保存 到 数据 库 中 
torm omubmle tunctenon( | 
// 实例 化 ajax 对 象 

var xhr=new XMLHttpRequest (); 
/ / BI. ajax Ak 
zar open expen c age eie o lero) 


/ RAK f 
xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded") ; 
// 发 送 请 求 
xhr.send("user="+account.valuet"&pass="+password2.value) ; 
// WOT ajax ASEH 
xhr.onreadystatechange=function () { 
// 如 来 啊 应 完成 
if (xhr.readyState==4) { 
// 如 来 啊 应 成 功 
if (xhr.status==200) { 
/ /接收 啊 应 的 数据 


var text=xhr.responseText 
/ /如果 为 1 则 说 明 注 册 成 功 ; 
if (text==1) { 
// 成 功 之 后 弹出 并 且 页 面 跳 转 到 登录 页 
alert ("i D) 


location hrei tese Dems 


} 
} 
} 
j 
} 


注册 成 功 之 后 束 是 登录 部 分 ， 在 登录 部 分 依然 是 通过 js 获取 输入 的 内 容 ， 通 过 ajax 发 
送 之 后 与 数据 库 的 数据 进行 对 比 。 代 人 码 如 下 : 
47 | 
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// 获取 要 操作 的 元 又 

var account=document.queryselector('faccount”™)> 
var password=document.querySelector ("#password") ; 
var login- -document .gqguery elector ("Iname login]. 
var sign- documenti .quervyoelector(” |name—si1gn |"); 
// ANEA PE R Tn 

Sam onclick -function()] 
location Aree Sian. nml 
j 

// Fi SES ARAR E GE 528008 P cB RIS EFT OT EG 

ie meom etim ede Tuneerom 

/ / BREA BJ WIE mr [RE 

var user-account.value; 

// 获 取 输 入 的 密码 值 

var pass=password.value; 

// 实 例 化 ajax 对 象 

var xhr=new XMLHttpRequest () 

// 配 置 请 求 ; 

zar open Doe Oca pine jr, 

// 添 加 头 部 信息 

xhr.setRequestHeader ("Content-Type","application/x-www-form-urlencoded"); 
// 发 送 头 部 信息 

xhr.send ("user="+user+"&pass="+pass) ; 
// 检 测 ajax 事件 

xhr.onreadystatechange=function () { 

// 如 来 啊 应 完成 

if (xhr.readyState==4) { 

// 如 来 啊 应 成 功 

if (xhr.status==200) { 

/ /接收 啊 应 的 数据 

var text=xhr.responseText; 

// 如 过 返回 1 说 明 登 录 成 功 

if (text==1) { 

alert ("SRM") 

// 如 果 返 回 0 说 明 密 码 错 误 

Yelse if (text==0) { 

alert ("ABB Vx") 

/ /如果 返回 2 说 明 账 号 错误 

else if (text==2) { 

alert ("账号 错误 ") 


} 
} 
} 
} 
} 


附 后 侣 PHP 部 分 文件 ， 用 于 判断 用 户 名 已 经 存在 的 check.php。 
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<?php 
// 设 置 编 码 方式 
header ("Content-Type: text/html; charset=utf-8"); 
/ / RAP Z 
CUT POST | Mase | 5 
// 连 接 数据 库 
ps 
// 设 首 数 据 库 编 但 方式 
se SSE cese (mE 
/ /但 询 语句 


Ssql="SHhECT user FROM login 7; 

/ /执行 查询 语句 

Pes MmYySol -query sei 

/ /处 理 拿 到 的 数据 
Sarr-ores-»fetch all (MYSOLI ASSOC) 
/ LABORO TREE ; 

Slen=count (Sarr) 

/ Di READE 
入 


// 如 果 有 这 个 用 户 名 
Li ($arr[$i] | "user" | IE RE 
/ /3&]n] 0 


echo. "0"; 
return 8 

} 

} 

/ / AEWRE] 1 
eehor “ab 


2> 


用 于 体 存 注册 信息 的 insert.php 


< Ph 

// 定 义 编码 方式 

header ("Content-Type: text/html; charset=utf-8") ; 
/ /连接 数据 库 
OO 
/ /获取 提交 的 用 户 名 

Paser IOS | Massie” |e 

// 获 取 提 交 的 密码 

ase PO ni pease | 

/ /定义 但 询 语句 

Dep INSERT INTO T login ("user") password: VALUES usen) apasi)"; 
// 执 行 租 询 语句 

Sres=Smysql->query ($sql); 

/ / WURF] 1 

if (Smysql->affected rows==1) { 


5 | 
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echo 
) 
?> 


用 于 验证 登录 的 login.php。 


<?php 

/ /设置 涉 部 。 编 码 方式 必须 和 html 的 编码 方式 一 样 

header ("Content-Type: text/html;charset-utf-8"); 
// 链 接 数据 库 ， 以 对 象 的 方式 去 创建 一 个 数据 库 链 接 

Ems = mysql ("NGealnest "soot", "teste ) 
// ”如 果 链 接 失 败 的 话 ， errno 这 个 函数 返回 错误 号 ，error 返回 错误 信息 
a (my cn onmes EHI a, 

echo "链接 数据 库 失 败 " Sn. 

} 

/ /设置 但 询 数 据 库 时 候 的 编码 方式 

/ / V EL DR 7] X 

Suv eeu Set. cesset ("BEI 9 

/ /获取 提交 的 账号 

S$zhanghao-9 POST["user"]; 

// 获 取 提 交 的 密码 

-Bass POST pass | ¢ 

// 定 义 查 询 字 符 串 
RON OO 
// 执 行 得 询 ， 把 结果 集 存 在 一 个 变量 里 面 
Sres=Smysql->query ($sql); 

// 处理 结果 集 

Sarr=sres->fetch all (MYSOLI ASSOC); 

/ /如果 结 果 非 空 

a | 

/ /判断 账号 用 户 名 是 否 一 致 


if (Szhanghao==Sarr[0] ["user"]) { 
/ AIT eA — 8X 
if (Spass==Sarr[0] ["password"]) { 


echo “i; 
telse{ 
echo ToT; 
} 

} 

Jjelse( 
echo "2"; 
} 

> 


这 样 ， 一 个 完整 的 登录 注册 尘 程 束 完 成 了 。 需 要 注 蕊 的 是 ， 这 个 流程 中 对 于 数据 的 安全 
性 没有 做 进一步 处 理 ， 这 种 方式 可 以 给 大 家 做 为 一 个 参考。 
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文件 处 理 和 拖 搜 一 文件 上 传 实战 


本 章 重 点 知识 
4.1 File API 


4.0 HTMLS 拖 搜 事件 
4.3 dataTransfer 对 象 
4.4 利用 拖 搜 效果 完成 上 传 功能 


HTML5 
| — SEDET 

对 文件 的 处 理 和 上 传 等 操作 一 直 是 Web 开发 中 的 一 项 重要 环节 ,比如 在 填写 个 人 信息 时 
的 头像 上 传 ， 或 者 是 邮件 的 上 传 等 。 传 统 的 上 传 方式 通过 HTML input 表单 上 传 ， 通 过 提交 
按钮 直接 提交 到 指定 的 后 台 文 件 去 处 理 ， 这 种 方式 对 于 监测 上 传 的 进程 是 非常 不 利 的 。 
HTMLS 中 提供 了 File API, File Reader API 等 来 帮助 我 们 操作 和 处 理 文件 ， 而 拖 搜 也 是 获取 
上 传 文件 的 一 种 方式 ，HTIML5S 中 新 增 的 拖 搜 事 件 不 仅 可 以 处 理 在 页 面 中 的 操作 ， 也 可 以 由 
在 浏览 右 外 发 生 的 拖 搜 来 触发 。 拖 搜 的 文件 也 可 以 由 File 对 象 接 收 到 ， 也 就 是 说 ， 我 们 现在 
可 以 直接 通过 HTMLS 实现 拖 搜 文件 上 传 功能 了 ! 

本 章 的 主要 内 容 : 

4.1 利用 File API 上 传 文件 的 介绍 ， 包 括 : File API, File Reader API, Formdata 等 介 
绍 ， 使 用 这 些 技术 ， 完 成 一 个 通过 input 上 传 并 显示 上 传 进度 的 功能 。 

4.2 HTMLS 拖 搜 事件 人 简介， 包括 : ondragstart, ondragend. ondragenter. ondragover. 
ondrop、ondragleave 等 事件 。 


4.3 dataTransfer 对 和 象 是 由 拖 搜 产生 的 事件 对 象 的 一 个 属性 ， 包 含 被 拖 搜 元 素 的 详细 


小 


结合 拖 搜 事件 和 File API 完成 一 个 拖 搜 上 传 头 像 的 案例 。 


4.1 File API 


HTMLS File API， 是 改善 基于 浏览 器 的 Web 应 用 程序 处 理 文件 上 传 的 方式 ， 使 文件 直 
接 上 传 成 为 可 能 。 我 们 可 以 通过 input 标签 获取 上 传 的 文件 ， 或 者 是 直接 通过 由 拖 放 操作 生 
成 的 dataTransfer 对 象 获取 文件 。 在 获取 到 文件 之 后 ， 我 们 还 可 以 通过 File Reader API Kik 
取 文 件 的 信息 ， 实 现 对 于 上 传 文件 的 显示 ， 或 者 是 对 于 上 传 进度 进行 监测 等 效果 。 

在 上 传 处 理 中 ， 我 们 第 用 到 的 对 象 有 File 对 象 、Formdata X., File Reader 对 象 等 ， 并 
且 如 条 我 们 想 要 真正 实现 上 传 功能 ， 当 然 也 离 不 开 Ajax 和 后 台 处 理 程序 。 在 本 市 中 您 将 会 
了 解 一 个 上 传 文件 的 案例 ， 并 且 包 含 上 传 之 后 的 显示 以 及 进度 显示 等 功能 。 


4.1.1 File 


File 对 象 是 来 目 用 户 在 一 个 <input> 元 素 上 选择 文件 后 返回 的 FileList 对 象 ， 也 可 以 是 来 
目 由 拖 放 操作 生成 的 dataTransfer 对 象 。 


«input type="file"> 


ft HTMLS 的 表单 中 可 以 设置 multiple 属性 ， 所 以 通过 input， 我 们 也 可 以 直接 上 传 多 个 
文件 ， 在 js 中 获取 到 input 控件 后 ， 可 以 直接 通过 对 象 的 files 属性 访问 上 传 文件 的 集合 
Filelist。 在 这 个 集合 中 包含 上 传 的 每 一 个 文件 以 及 集合 的 长 度 属性 。 

集合 当中 的 某 一 个 元 素 就 是 一 个 File 对 象 ， 这 个 对 象 属性 如 下 : 

lastModifiedDate: 当前 File 对 象 所 引用 文件 最 后 修改 时 间 ; 

name: 当前 File 对 象 所 引用 文件 的 文件 名 ; 

size: 当前 File 对 象 所 引用 文件 的 文件 大 小 ,单位 为 学 市; 
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type: 当前 File 对 象 所 引用 文件 的 文件 类 型 CMIME 类 型 )。 
利用 这 些 属性 可 以 轻易 的 完成 一 些 关 于 文件 上 传 类 型 ， 上 传 大 小 ， 文 件 格式 等 常见 的 验 
证 判断 。 


4.1.2 FormData 


通常 我 们 提交 (使 用 submit button) 时， 会 把 form 中 的 所 有 的 表单 元 素 的 name 与 
value 组 成 一 个 查询 字符 串 ， 提 交 到 后 台 。 但 当 我 们 使 用 Ajax 提交 时 ， 这 个 过 程 束 要 变 成 人 
LN Ss. Alt, FormData 对 象 的 出 现 可 以 减少 一 些 工 作 量 。 

修改 或 者 获取 FormData 有 三 种 方式 : 

(1) 创建 一 个 空 的 FormData 对 象 ， 然 后 再 用 append 方法 逐个 添加 键 值 对 。 


EN 
Formdata.append ("name","zhangsan"); 


Formdata.aopend (fi leob)) ; 


(2) 获取 到 form 元 素 对 象 ， 将 它 作 为 参数 传递 到 FormData 中 。 


var formobj-document.querySelect ("form"); 


var formdata-new FormData(formobj); 


(3) 利用 form 元 桑 对象 的 getFormData 方法 生成 。 


var formobj-document.querySelect ("form"); 


var formdata-formobj.getFormData(); 


4.1.3 File Reader 


使 用 File Reader 对 象 Web 应 用 程序 可 以 措 步 的 读 取 存储 在 用 户 计 算 机 上 的 文件 (或 者 原 
始 数 据 绥 冲 ) 内 容 ， 可 以 使 用 File 对 和 象 或 者 Blob 对 象 来 指定 所 要 处 理 的 文件 或 数据 。 其 中 File 
对 象 可 以 是 来 和 目 用 户 在 一 个 <inpu 人 元 素 上 选择 文件 后 返回 的 FileList 对 象 ， 也 可 以 来 目 拖 搜 操 
作 生 成 的 dataTransfer 对 象 ， 还 可 以 是 来 和 目 在 一 个 HIMLCanvasElement 上 执行 mozGetAsFile() 
方法 后 的 返回 结果 。 

要 得 到 一 个 File Reader 对 象 很 向 单 : 


Var fr=new FileReader (); 


File Reader “| £& @ W ^ FY: abort. readAsDataURL 、  readAsText 、 
readAsBinaryString, HLP abortO 用 于 停止 操作 ， 后 面 三 个 分 别 表 示 将 文件 读 取 为 DataURL、 
该 取 为 文本 、 谈 取 为 二 进 制 编码 。 无 论 读 取 成 功 或 失败 ， 这 几 个 方法 都 不 会 返回 任何 纤 
返回 的 结果 存储 在 对 象 的 result 属性 当中 。 

File Reader 对 象 还 有 一 系列 的 事件 用 来 检测 读 取 的 状态 ， 包 括 onabort 中 断 、onerror 出 
H. onloadstart 开始 、onprogress 正在 读 取 、onload 成 功 读 取 、onloadend 读 取 完成 ， 不 论 是 


否 成 功 都 会 触发 。 
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4.1.4 Ajax 4H Upload 


Ajax 是 用 来 异步 操作 数据 的 一 种 技术 ， 使 用 Ajax， 我 们 可 以 将 获取 到 的 FormData 对 象 
通过 send 传递 到 后 人 台 处 理 程序 ， 在 Ajax 中 内 置 了 一 个 Upload 对 象 ， 这 个 对 象 映 上 有 三 个 事 
件 ， 分 别 是 onprogress 表示 正在 上 传 、onloadend 表示 上 传 完成 、ontimeout 表示 请 求 超时 。 

onprogress 事件 的 事件 对 象 中 包含 两 个 属性 loaded 和 total， 分 别 可 以 表示 已 经 上 传 完 成 
的 数据 量 和 总 的 数据 量 。 利 用 这 些 数据 ， 我 们 可 以 制作 上 传 进度 条 效果 。 

案例 : 通过 input 实现 图 片上 传 。 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
“Ciel Pocumene mile 
<style> 

.container { 
pox sizing:bDorder box; 
widim: d40d4px neroni: 00px; border: lp: olid cele tes 
loo cler radius: px; 
padding top: 20px; 
ÞDackground: linear gradient (to bottom tO0ff ,Off 20px, transparent 0); 
margin: 0 ati oO; 

| 
INED NER | 
padding: O margin: Or 
border:none; 

} 

Container Inputitype Tilelli 
width: -200px height: 0px; 
Porder: lp olid oos 
background color: 7EFFD4; 
Colore t o sse 

float:left, 

} 

Contamner noutltyvoe outeonmll 
widen: 100px bre mentam 2p; 

Plod emu, 
DOroer Ip T So el 
Goes chs beat 

j 
progressi 
Qiesela slo OCI? 
width:400px; 
Re 0px, 
teurer pt Eo 


} 
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.Showarea( 
widihn: 90/010» manehne e ate 20) Ops E 
bender: p old eee. 
margin: Opx ell Or 

} 

.Showarea h3{ 
wide ae dE TOP «p 
margin: 9 nie 
line-height: 60px; 
text aligo: center: 
berder GotEEom: lex solid Foco; 
color: oloo; 

} 

. sShowareaimg { 
max width:100; 

} 
</style> 
</head> 
soos 
<div Cclass—="Ccontainer .> 
<input type="file"> 
<input oe burton veal "|e" 
<div style="clear:both"></div> 
<progress value="0" max="100"></progress> 
anv 
<div class="showarea"> 
<h3> 显 示 区 域 </h3> 
Ac 
«^ oC 


布局 部 分 包含 三 个 模块 上传 提交 模块 、 进 度 显 示 模 块 、 图 片 显 示 模 块 ， 效 果 
如 图 4-1: 


= 
e 


i... | 未 选择 文件 。 Iff 


显示 区 域 


图 4-1 
Js 部 分 : 


<—sCripe> 


// 获取 相应 的 DOM XY BR 


ELE 
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var Tile=docoument .queryoeleetor(" |ryoe—ra lel): 
var sub-document.querySelector("[type-button]"); 
var show-document.querySelector(".showarea"); 


var progress=document.querySelector ("progress"); 
// 给 上 传 按钮 添加 点 击 事件 
sub onclick fúünctilonl(e)| 

// 获 取 文 件 对 象 因为 是 集合 所 以 选择 第 0 个 
| 
EE formdata WR 
var formdata-new FormData(); 
// 将 文件 对 象 添加 到 formdata 中 
formdata append (“uploadi fi leon, ) ; 
// 实例 化 ajax 对 象 
//var xhr=new XMLHttpRequest () ; 
// 实例 化 文件 读 取 对 象 
var fr-new FileReader(); 
// 将 数据 读 取 为 地 址 信息 
fr.readAsDataURL(fileobj) 
trcondboad-tunctron(e 
// 创建 img 标签 
var img-document.createElement ("img"); 
/ / 将 图 请 路 径 设 置 为 读 取 到 的 地 址 
img.src=this.result; 
/ / PEE FEES DUB S S XP 
show. appendChild (img) 

j 
// 注册 文件 上 传 中 事件 
xhr uload onprogress—runcEelon (ec) 
// 获 取 当 前 上 传 进度 传递 到 progress 中 显示 
progress.value-parseInt(e.loaded/e.total*100) 
} 
// BOS ajax wk 
zareo open OOS. ake okie. 
// 发 送 请 求 
xhr.send(formdata) ; 
} 
Se 


附 后 台 部 分 代码 ， 文 件 运 行 在 Wamp 集成 环境 中 ， 更 多 关于 Wamp 的 安装 信息 ， 请 关 
注 本 书 附录 Co 


PRD 
EU ace 基本 ccs IE me 10) 0 
Mewes Ujoleecdecl Tte (3 Luss [| toleecl’ | | wus meme 155/1119. ius 
PP uptoad ] name" |) z 
by 
Er. 
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文件 处 理 和 拖 搜 一 一 文件 上 传 实战 
上 传 之 后 的 效果 如 图 4-2 所 示 : 


4-2 


4. HTML5 拖 搜 事件 


HTMLS 提供 了 拖 搜 API 效 末 ， 且 在 各 个 浏览 器 中 都 有 很 好 的 文 持 ， 可 以 实现 一 些 拖 搜 
上 传 、 拖 搜 移动 、 拖 搜 删 除 等 效果 ， 原 先 我 们 想 要 实现 拖 搜 的 效果 需要 借助 Javascript 中 的 
onmousedown, onmousemove, onmouseout 这 些 事件 来 处 理 。HTMLS 对 拖 搜 事件 进行 了 更 
加 详细 的 划分 ， 包 括 拖 搜 开始 (ondragstart)、 拖 搜 结 束 (ondragend )、 进 入 目标 区 域 
(ondragenter)、 在 目标 区 域 移动 (ondragover)、 投 放 到 目标 区 域 时 (ondrop)、 从 目标 区 域 离 
JF Condragleave) 等 事件 。 本 节 会 对 这 些 事件 进行 详细 的 介绍 。 


4.2.1 draggable 属性 


想 要 在 某 个 元 素 上 使 用 拖 搜 ， 这 个 元 素 必须 具备 draggable 属性 。 这 个 属性 有 三 个 值 
true, false 或 者 auto. true 表示 可 以 拖 动 ，false 表示 不 能 拖 动 ，auto 表示 根据 浏览 右 的 情况 
目 行 判断 。 给 一 个 div 添加 上 draggable 为 tue， 这 个 div 39 n] LA PHBA T o 

格式 :<div draggable="true"></div> 


4.2.2 ondragstart 事件 


ondragstart 表示 被 拖 搜 对 象 开始 被 拖 动 ， 作 用 于 拖 搜 对 象 ， 例 如 : 


HTML5 


实战 宝典 
<head> 


<meta charset-"UTF-8"» 

sume Document Eees 

Ss Cilia 

window. onload=function () { 

// 获 取 被 拖 搜 的 对 有 象 

var ime=doeument ceUeryoelecotor( demo am!) 
/ /获取 投放 区 域 对 象 

var demo2=document.querySelector(".demo2") ; 
// 添 加 拖 搜 开 始 事件 

IMmg.Ondragcteart—runet1on{) | 

// 拖 搜 开 始 事件 处 理 程序 

demo2 .innerHTML=" 拖 搜 开 始 " 

| 

} 


< exea ger 

<style> 

/ * LEACHED BRAS aa AS MEE ZA * / 
. demo { 


waltl: DOT d Nergnt: 00px border: p: ol Ted; 

} 

/* 给 投放 区 域 对 象 添加 样式 */ 

. demo2 { 

widch:200px;/ height: 200px border: Ihe -olid gogreen; 
| 

</style> 

</head> 

<body> 


<div elass=" demo "> 


<img src="demo.jpg" alt-"" draggable-2"true" width="100" 
«obs 

«div class="demo2"></div> 

body 


AM EAS (Chrome) 如 图 4-3 所 示 。 


图 4-3 


EM 


height="100"> 
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4.2.3 ondrag 事件 


ondrag 事件 表示 元 素 被 拖 动 的 过 程 中 触发 的 事件 ， 作 用 于 被 拖 搜 对 象 ， 例 如 : 


le 
// 添 加 拖 搜 事件 
nme em 
demo2 .innerHTML=" 拖 搜 中 " 
} 

sedes 


A (Chrome) 如 图 4-4 所 示 。 


图 4-4 
4.2.4 ondragend 事件 


ondragend 事件 表示 拖 搜 对 象 拖 搜 结束 ， 作 用 于 拖 搜 对 象 ， 例 如 : 


IgE 
<! —- YS FBTR ATR SMT--» 
img.ondragend=function () { 
demo2 .innerHTML=" 拖 搜 结束 " 
} 

[H.E 


效果 (Chrome) 就 是 在 放 开 被 拖 搜 对 象 时 demo2 中 会 啊 应 这 个 事件 如 图 4-5 所 示 。 


4.2.5 ondragenter 事件 


TEHI-- A bebe tk, (uev EROBUCEU Y Det, iu Hy DS USE, he BETES 
和 是， 这 里 的 进入 指 的 是 鼠标 的 进入 ， 不 是 拖 搜 对 象 的 进入 。 例 如 


EE 
dme 5 oar be EIS feahe tumeE om.l 
demo2 .innerHTML=" 进 入 目标 区 域 " 
} 

Sms 


a EAS (Chrome) 如 图 4-6 所 示 。 


图 4-6 


4.2.6 ondragover 事件 


ondragover {FH FB tk, EE iva Ze A pK A) BS, CT SEES 
复 触 发 ， 在 拖 搜 元 素 时 ， 每 隔 350 坚 秒 会 触发 ondragover 事件 。 例 如 


Fe) ale 
demo2.ondragover=function() { 
var word=document.createTextNode (" 在 目标 区 域 移动 ") ; 
demo2.APPendChild(words) ; 


} 
[H.E 


效果 展示 (Chrome) 如 图 4-7 所 示 。 


EM 


4.2.7 ondrop 事件 


EEPDOEESTEEN OUR 
移动 在 目标 区 域 欧 动 在 目标 
区 域 移动 在 目标 区 域 乏 动 在 
Sane ae Bn 
pee DUEB 


目标 区 域 移 pe Rina 


GEI NM SMTE 
标 区 域 移动 在 目标 区 域 移动 
在 目标 区 域 移动 在 目标 区 域 
移动 在 目标 区 域 移动 在 目标 
区 域 移动 在 目标 区 域 移动 在 


B AnI mbizr-zhzr EE biz 


图 4-7 
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表示 拖 搜 对 象 被 投放 在 投放 区 域 后 触发 的 事件 ， 作 用 于 投放 区 域 。 需 要 注意 的 是 ， 需 要 
使 用 ondrop 事件 时 ， 必 须 把 ondragover 事件 的 浏览 器 默认 行为 阻止 掉 。 例 如 : 


| 


demo omncs or dme one 


e&opieveniDej seu. 6t) 


demo2.1inne rHTML=" 投 放 完 成 ae 


} 


demo2.ondragover=function (e) { 


e.preventDefault(); 
} 
| 

.同上 


HE (Chrome) 如 图 4-8 所 示 。 


图 4-8 


— | 
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4.2.8 ondragleave 事件 


ondragleave 事件 表示 被 拖 搜 对 和 象 从 投放 区 域 离开 时 触发 的 效果 “(Chrome )， 如 图 4-9 
所 示 。 


. .同上 
demo2.ondragleave=function () { 
demo2 .innerHTML=" 图 片 从 目标 区 域 离开 " 
} 

. .同上 


图 4-9 


完成 一 次 页 面 内 元 素 拖 搜 的 行为 事件 过 程 ， 对 于 被 拖 搜 :ondragstart ^ ondrag 一 
ondragend; 对 于 投放 区 域 :ondragenter 一 ondragover 一 ondrop 一 ondragleave。 完 成 一 个 功能 3 
不 需要 把 每 一 个 都 去 调用 ， 我 们 只 需要 选择 几 个 需要 的 就 可 以 了 ，HTML5 为 了 更 加 方便 去 
传递 一 些 拖 搜 当 中 的 数据 ， 还 提供 了 dataTransfer 对 象 ， 下 一 节 将 会 详细 的 介绍 这 个 对 象 的 
属性 和 方法 。 


4.3 dataTransfer 对 象 


dataTransfer 对 象 提 供 了 对 于 预定 义 的 剪贴 板 的 访问 ， 它 属于 拖 搜 事 件 对 象 的 属性 ， 所 
以 要 先 访 问 到 事件 对 象 以 便 在 拖 搜 操作 中 使 用 。 人 简 而 言 之 ， 束 是 在 进行 拖 搜 操作 时 ， 可 以 在 
拖 搜 开始 的 时 候 获 取 拖 搜 对 象 的 数据 ， 在 拖 搜 结束 的 时 候 又 可 以 对 这 些 数 据 进行 操作 。 


4.3.1 dataTransfer 对 象 的 属性 


(1) dataTransfer.dropEffect 设置 或 返回 目标 上 人 允许 发 生 的 拖 搜 操作 ， 可 以 设置 “null? 
“copy”“1link” 和 “move“ 这 四 个 值 之 一 ， 但 是 如 果 设 置 的 值 不 在 dataTransfer.effectAllowed jt 
许 的 操作 中 ， 则 此 拖 放 效果 会 失效 ， 默 认 值 是 none. 

(2) dataTransfer.effectAllowed 返回 允许 执行 的 拖 搜 操作 效果 ， 可 以 设置 修改 ， 包 含 这 
wef: “none”“copy”“copyLink”“copyMove”“link”“linkMove”“move”“all” 和 和 
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“uninitialized”. 
(3) dataTransfer.types: 返回 在 dragstart 事件 触发 时 为 元 系 存 储 数据 的 格式 ， 如 末 是 外 
部 文件 的 拖 搜 ， 则 返回 “flles”。 
(4) dataTransfer.items: 返回 DataTransferltems 对 象 ， 该 对 象 代 表 了 拖 动 数据 。 


4.3.2 dataTransfer 对 象 的 方 ; 


(1) dataTransfer.setData 〈format,data)， 用 于 将 指定 格式 的 数据 赋值 给 dataTransfer 对 
B, format 代表 数据 的 类 型 ， 比 如 ，text、url 等 ，data 表示 要 设置 的 数据 。 
(2) dataTransfer.getData (format), 55 setData 对 应 ，getData 用 于 获取 数据 。 例 如 : 


<!doctype html> 

<html lang="en"> 

<head> 

«meta charset="UTF-8"> 
«mede ocurren 
SOS INO 
window.onload=function() { 
/ / RAFT Be FCI IX X 


Wee line Sco eC bineinc sedere vise rece one (" Clee acer e 


var demo2=document.querySelector(".demo2") ; 

// 在 拖 搜 开始 的 时 候 获 取 图 片 的 sre 属性， 保存 到 dataTransfer WRE. 
img.ondragstart-function (e) { 
e.dataTransfer.setData("url",this.src); 

} 

// 阻 止 ondragover HFR ÆW AY hi aR AT A o 
demo2.ondragover=function (e) { 
e.preventDefault(); 

} 

/ /投放 结束 的 时 候 获 取 dataTransfer 对 象 上 的 保存 的 值 。 创 建 一 个 新 图 片 ， 插 入 到 容 髓 中 。 
demo-  ondrop ~ function(e) 

var src-e.dataTransfer.getData ("url"); 

var img-document.createElement ("img"); 
"WIS = 

demo2.APPendChild(img) 

} 

} 

<7) SCI 

<style> 

.demo { 

width: lOGpx,; heroin: 100px; border: lox solid red; 

} 

. demo2 { 

width: Zone? height: 200Bx border: PpP -olid oreen; 
| 


_ | 


实战 宝典 
img { 


width: 100px height: LOOP; 
| 

</style> 

</head> 

<body 

<div class="demo"> 

<img sre" demo. oe ect draoggable = i rue > 
< 

<div class="demo2"></div> 
</body> 

<j Inne 


Fil) Hioc CR Ben TRI EA siu — 1 18] LBS Pr 22 HBR Chrome), WE 4-10 所 示 。 


4.4 


图 4-10 


利用 拖 搜 效果 完成 上 传 功能 


在 本 节 中 ， 我 们 将 结合 drag 和 File API 完成 一 个 拖 搜 上 传 头 像 的 和 案例。 在 投放 区 域 的 ondrop 


事件 中 获取 dataTransfer 对 象 ， 在 dataTransfer 中 可 以 获取 到 拖 搜 的 文件 信息 ， 通 过 Ajax f£ 


XE SIUE A 
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， 后 台 将 上 传 图 片 的 路 径 返 回 ， 然 后 在 对 应 的 区 域 显示 。 


<!doctype html» 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
sete Dooumene s eate les 


uc GUN S 
window.onload=function() { 
// 获取 需要 的 元 素 


var head-document.querySelector(".head"); 


var droparea-document.querySelector('.droparea'); 


// 定义 一 个 开关 用 来 绑 定 事件 

var flag=true; 

// 添加 事件 处 理 上 传 区 域 的 显示 和 隐藏 
head one a kE rUn on 

If (ilag) 
droparesa:style di- -play "Lheock ue 

Jjelse( 
droparea style display none, 

} 
flag=!flag; 

}; 

// 给 投放 区 域 深 加 投放 事件 

droparea ongdrop=funet Lon (e) { 
e.preventDefault(); 

// 获 取 文 件 对 象 

var fileobj=e.dataTransfer.files[0]; 
// 实 例 化 formdata 对 象 

var formdata=new FormData(); 

// 将 文件 对 象 添 加 到 formdata 中 
tTormata append( "ueload aseo) 
// 实例 化 ajax 对 象 

var xhr=new XMLHttpRequest (); 

// 实例 化 文件 读 取 对 象 

zar open pos tensor es 

// 发 送 请 求 

xħhr.send(trormdata)? 

// 注册 Ajax 上 传 完 成 事件 
xhr.onreadystatechange=function (e) { 
// 当 整 个 上 传 过 程 完成 时 
in (xhr readvySrare=—"4") 4 
// 当 返 回 的 状态 但 为 成 功 或 者 未 修改 时 
if (xhr.status=='200'||xhr.status=='304') { 
// TS Sk BB 
droparea.style.display='none'; 

// FRE 
flag=true; 

/ /获取 返回 的 数据 

var src-xhr.responseText; 

// Bi — Sik Er 

var img-document.createElement ("img"); 

// 将 图 请 路 径 设 置 为 读 取 到 的 地 址 
I Eeo; 

// SMS ABMS Dy psc 
head.appendChild (img); 

} 

} 


文件 处 理 和 拖 搜 一 一 文件 上 传 实战 


ELE 


文件 处 理 和 拖 搜 一 一 文件 上 传 实 战 


</style> 

</head> 

<body> 

<div class="head"></div> 

«div class="droparea" e e Six </div> 


voe 
«altem 
AUR AE 4-11. 4-12 Pras. 
Ef: 
十 
拖 搜 照 卢 到 这 里 
图 4-11 
上 传 成 功 之 后 


图 4-12 


HTMLS 拖 搜 效 来 在 各 大 主流 浏览 莫 平 台 上 部 获得 了 较 好 的 文 持 ， 但 在 旧版 的 IE 20 bias 


中 还 需要 人 处理 一 些 细节 。File API 除了 在 正中 有 部 分 功能 不 被 文 持 之 外 ， 第 用 的 功能 还 是 可 
以 正常 使 用 的 ， 所 以 ， 拖 搜 和 FileAPI 还 是 很 值得 我 们 研究 和 使 用 的 。 关 于 拖 搜 和 文件 处 理 


API 的 部 分 ， 读 者 可 以 参考 本 书 附录 。 
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客户 端 存储 一 一 在 线 可 编辑 表格 实战 


5.1. Aum ea a 


Cookies 从 JavaScript 出 现 之 初 束 一 直 存 在 ， 所 以 在 Web 上 存储 数据 并 不 是 个 新 概念 。 


不 过 Web 存储 是 数据 存储 的 一 种 更 强大 的 版 本 ， 它 可 提供 更 多 有 的 安全 性 、 吻 用 性 和 更 快 的 
速度 。 在 Web 上 还 可 以 存储 相当 大 的 数据 ， 上 基体 的 大 小 取决 于 Web 浏览 器 ， 但 通常 都 在 SMB 
到 10MB 之 间 。 这 对 于 一 个 HTML 应 用 程序 而 言 已 经 足够 大 了 。 为 一 个 好 处 是 此 数据 并 不 
会 在 每 次 出 现 服务 大 请 求 时 都 被 加 载 。 唯 一 的 限制 是 不 能 在 浏览 器 之 间 分 享 这 些 Web 存储 ， 
BIURE Safari 中 存储 了 数据 ， 那 么 该 数据 在 Firefox 中 是 无 法 访问 的 。 内 置 到 HTMLS 中 的 
Web 存储 对 象 有 两 种 类 型 

sessionStorage 对 象 负责 存储 一 个 会 话 的 数据 。 如 果 用 户 关 财 了 页 面 或 浏览 器 ， 则 会 销 
毁 数 据 。localStorage 对 象 负责 存储 长 期 的 数据 。 当 Web Wisk as, ie tee 
数据 的 存储 ， 当 然 这 还 取决 于 浏览 器 设置 的 存储 量 。 这 两 种 存储 对 象 具 有 相同 的 方法 和 属 
性 。 为 了 获得 一 致 性 ， 本 书 在 所 有 的 示例 中 使 用 的 都 是 localStorage 对象。 下面， 将 了 解 Web f£ 
储 的 强大 功能 ， 以 及 它 成 为 优 于 Cookies 的 一 种 存储 方式 的 原因 。 我 们 还 将 探索 基本 的 Web 存 
储 概念 、HIML5 Web 存储 方法 和 浏览 器 支持 。 

几乎 所 有 主流 浏览 器 均 文 持 Web 存储 特性 ， 这 些 浏览 器 包括 Firefox. Chrome, Safari, 
Opera 和 Microsoft IE 8.0 以 上 版 本 。 但 是 IE 7 和 更 早 版 本 不 文 持 Web 存储 。 

HTMLS Web 存储 的 浏览 器 文 持 十 分 实用 ， 但 是 ， 较 旧 的 浏览 器 需要 在 使 用 之 前 检查 
Web 存储 文 持 的 浏览 器 。 这 种 检 答 非常 简单 ， 可 以 使 用 一 个 简单 的 条 件 语 句 来 个 看 HTMLS 
存储 对 象 是 否 已 经 定义 。 如 果 已 经 定义 ， 就 可 以 放心 进行 Web 存储 脚本 编写。 如 果 未 定 
义 ， 而 数据 存储 又 是 必需 的 ， 则 需要 采用 一 种 备 选 方法 ， 比 如 JavaScript Cookie. 

以 下 代码 显示 了 一 种 简单 的 为 Storage 对 象 进行 浏览 右 检 查 的 方式 。 


if (typeof (Storage) !== "undefined") { // Web storage is supported } 


else { // Web storage is NOT supported } 


5.2 利用 localStorage API 管理 数据 


localStorage 是 一 种 永久 在 本 地 保存 数据 的 方式 ， 存 储 的 数据 量 大 ， 存 储 的 数据 在 当前 域 
名 下 都 访问 ，localStroage 是 window 对 和 象 下 的 一 个 属性 ， 所 以 访问 它 的 时 候 可 以 不 写 window. 


1. 如 何 检 测 浏览 器 是 否 支 持 


if (window. localStorage) { 

alert ("Wil asic localStorage") 
}else{ 

alert ("浏览 右 不 文 持 localStorage") 
} 


2. 如 何 添 加 数据 
添加 数据 是 通过 键 值 的 方式 加 载 的 ， 方 式 非常 简单 。 


HTML5 
实战 宝典 

添加 方式 一 : 
localStorage.name-"zhangsan"; 

添加 方式 二 : 
local torace Tager] | 

添加 方式 三 : 
localStorage.setItem("sex","man"); 


测试 添加 结果 (Chrome) 如 图 5-1 Pr: 


[x A] Elements Console Sources Network Timeline 


B Clear stor’ Key Value 
age Le 
Storage name zhangsan 


Sex man 
v == Local Sto 


EEITA.. 


— b 22 Seccion S7) —— 


3. 如 何 获 取 数 据 
获取 方式 与 设置 方式 对 应 ， 也 有 三 种 方式 。 
NT sk: 


var vall=localStorage.name; 


获取 方式 二 : 


var val2=localStorage["age"]; 


获取 方式 三 : 


var val3-localStorage.getItem("sex"); 


4. 如 何 删 除数 据 
localStorage.removeIltem("name"); 


消除 挥 所 有 的 数据 


localStorage.clear(); 


需要 注意 的 问题 : 

(1) localStorage 存储 的 数据 只 能 是 字符 串 ， 即 使 在 存储 的 时 候 保存 的 是 其 他 类 型 ， 获 
取 到 的 还 是 一 个 字符 串 。 

(2) 假如 我 们 想 在 localStorage 中 存储 一 个 json 格式 的 数据 ， 不 经 过 处 理 下 接 存 储 肯定 
是 不 可 以 的 ， 我 们 可 以 使 用 json 格式 数据 的 转换 方法 JSON.stringify() 和 JSON.parse0， 可 以 


EM 


客户 端 存储 一 一 在 线 可 编辑 表格 实战 
在 Json 格式 和 学 符 串 格式 之 间 互 相 转 换 : 
var message={name: "zhangsan",age:1/,sex:"man"} 


localStorage.setlItem("message",JSON.stringify (message) ) 


var newmessage=JSON. parse (localStorage.getItem("message") ) 


(3) 安全 性 问题 。Web 存储 并 不 比 Cookies 安全 ， 所 以 不 要 在 客户 端 存储 敏感 信息 ， 例 
如 密码 或 信用 卡 信息 如 图 5-2 所 示 。 


Lr d] Elements Console Sources Network Timeline 


Bi Clear stor^ Key | Value 
message {"name":"zhangsan","age":17,"sex":"man"} 


Storage 


v == Local Sto 


EFI .. 


lk 5-2 
假设 在 您 的 网 站 上 ， 要 为 一 个 Web 表单 提供 离线 文 持 。 如 果 用 户 提交 了 表单 ， 并 且 在 
网 站 恢复 在 线 时 让 此 表单 与 服务 噩 同步 ， 那 岂 不 是 很 棱 。HTMLS 可 以 实现 此 目标 ， 在 5.4 
wH, HRF localStroage 的 保存 表单 信息 的 应 用 介绍 。 


5.3 利用 sessionStorage API 管理 数据 


sessionStorage 是 HTMLS Web 存储 的 男 一 种 方式 ， 用 于 存储 本 地 一 个 会 话 (session) 级 
别 的 数据 ， 通 过 sessionStorage 存储 的 数据 和 通过 localStorage 存储 的 数据 有 效 期 是 不 同 的 。 
一 旦 窗口 或 者 标签 页 被 永久 关闭 了 ， 那 么 所 有 通过 sessionStorage 存储 的 数据 也 吏 被 删除 了 。 
sessionStorage 和 localStorage 拥有 相同 的 API， 所 以 ， 在 上 一 节 中 介绍 的 属性 和 方法 ， 
在 这 一 他 也 可 以 使 用 。 
比如 设置 数据 如 网 5-3 TAN: 
sessionStorage.name="zhangsan"; 


Sessivonstorage lagel "l"; 


SesstonsuOrage.sceltem( sex" mam”); 


Lr d] Elements Console Sources Network Timeline 


A 


Storage Key | Value 
-— age |17 
v == Local Sto 
name zhangsan 
=s file:// Sex man 
v == Session S 
== file:// 
图 5-3 
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接 下 来 ， 通 过 一 个 例子 来 运用 一 下 sessionStorage: 


<Joocet yeoe html- 

«html lang="en"> 

<head> 

<meta charset="UTF-8"> 
ELSE Doc umen db e ke> 

< er de 

/ /页 面 加 载 完 成 后 执行 

window.onload=function() { 

/ / FUERA span 

var span=document.querySelector ("div span"); 
// 定 义 一 个 初始 值 num 

var num=0; 

/ /如 果 在 session PA count 的 值 则 获取 这 个 值 并 目 加 


if(SsesesionStorage .gerl rem (“coune”)!—undetined) { 


var newnum=Number (sessionStorage.getItem("count")); 
span. innerHTML=++newnum; 
sessionStorage.setlItem("count",newnum); 
}else{ 

/ /如果 在 session 中 没有 count 值 则 初 设置 为 初始 值 
seeoolonSstorage ssem counti", num) 

} 

} 

< 

</head> 

<body> 

<div> “HU <span>0</span>ixmllipt A 0 </div> 
«Ul Doe 

«ote 


这 样 ， 在 页 面 中 就 能 实时 显示 当前 是 第 几 次 刷新 页 面 。 本 书 附录 有 关于 本 地 存储 API 的 
相关 介绍 。Web Storage 的 例子 ， 谈 者 可 以 自行 得 看 。 


5.4 在线 可 编辑 表格 实战 


本 节 将 介绍 如 何 利用 localStorage 制作 一 个 可 以 在 线 编辑 的 表格 ， 以 实现 添加 删除 和 修 


改 等 功能 。 主 要 通过 给 每 一 个 内 容 td 注册 单 击 事件 ， 在 单 击 的 时 候 生 成 一 个 input 标签 ， 用 
户 可 以 在 input 中 输入 数据 并 且 在 失去 焦点 后 获取 到 修改 后 的 值 并 人 存 入 本 地 存储 。 完 整地 实 
3 Y AE IR] ZU BE o 


—<Vdoectyoe html- 

«html lang="en"> 

«head» 

«meta charset="UTF-8"> 
“teller Document eb db 
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<style> 

/ BCE ASS ENE ZA / 

table { 

width: T 200px; 

height: auto; 

border-collapse: collapse; 

border: lpx solid 7000; 

uae tret tore OL et ble 

} 

/* 设 置 表 头 和 td 单元 格 的 样式 */ 

tele lay | 

border: px solid +000, 

} 

/* 设 置 添 加 按钮 的 样式 */ 

TN 

vno belg. mop 

height: 0p; 

CURSOR. 本 one 

tert align Center; 

Tont size: Op; 

line-height: 30px; 

font weight: Dold: 

benders Lox solid 7000; 

border—top: 0; 

Marga (OI e DEO 

} 

</style> 

er 

window. onload=function () { 

//3R table WR 

var table-document.getElementsByTagName ("table") [0]; 

// WRATH Hii FU message 的 结果 为 空 则 声明 一 个 新 数组 

if (!localStorage.message) { 

var arr-[]; 

}else{ 

/ /如 果 不 为 空 则 将 结果 转化 为 JSON 格式 

var arr-JSON.parse(localStorage.message) 

| 

// 明 历 得 到 的 数组 ， 为 每 一 条 信息 创建 一 个 tr 

本 

// ie — | er hae 

var tr-document.createElement ("tr") 

//fE tr PRCA VOUS ca Zu Vexk4ls SENT TE TBR 

tr.innerHTML="<td dust mame’ "are | 
attr='age'>"+arr[i].age+"</td><td curse rumes ac Rel 


class='del'>/HiR</td>"; 
73 | 
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// 将 tr MAFI] table 中 

table. appendChildl(try: 

j 

//23 table 添加 双击 事件 通过 事件 委派 的 方式 添加 给 每 一 个 tdq 
table.ondblclick=function(e) { 

var target=e.target; 

/ / PIURA ta 是 一 个 可 以 用 来 输入 操作 的 就 继续 进行 

if (target.nodeName=="TD"&&target.className!="del") { 
/ /3kRUBg ta BJ attr BY 
人 

// RAAB td I Se x 

var parent=target.parentNode; 

A RA tx 

var trs=document.getElementsByTagName ("tr"); 
二 | 

// 通 历 所 有 的 tr 判断 如 果 当 前 tr 是 我 们 正在 操作 的 tz 则 获取 现在 的 index fH 
in (ees [a | P ent) 

var bool cede 

break; 

} 

}; 

/ /获取 td 中 保存 的 旧 值 ， 如 果 这 个 值 是 空格 则 将 这 个 值 赋值 为 空 衬 符 串 
var Oldv—targer-innerk TMI; 

aL (obese abso | 

oldv=""; 

} 

// 将 td 中 的 内 容 清 空 

target.innerHTML=""; 

// 创 建 一 个 输入 框 input 

var input-document.createElement ("input"); 

// 设 置 input HJ type 类 型 和 value fi, value UA AWIA SRA A A 
Jen cS VID ON EON 


Lowe. value—olldy; 

// 将 input 插入 到 ta 中 
Eaecger.appendehr ld (impur ) 
//ik ta 自动 获得 焦点 
LOU 4 OCUS): 

//input 失去 焦点 的 时 候 ， 也 就 古 我 们 的 修改 已 经 完成 的 时 候 执 行 
lm onl is idee aor ()) d 

// 获 取得 到 的 新 值 

var newv=this.value; 

// KW ta 中 移 除 这 个 input 7625 
target remove NIild(this); 

// 将 tq KEME AN KIRI T AT EL 
target.innerHTML=newv; 


/7 判断 如 果 新 值 和 旧 值 一 样 则 直接 返回 不 在 继续 执行 


客户 端 存储 一 一 在 线 可 编辑 表格 实战 

if (newv==oldv) { 

returns 

j 

// 将 数组 中 对 应 的 元 素 的 对 应 属性 赋值 为 新 值 

arr[index] [attr]=newv; 

/ /将 数据 存 入 localStorage 中 

localStorage.message=JSON.stringify (arr) ; 

j 

} 

} 

/ SII A e Is 

// 获 取 添 加 投 钮 

var add-document.getElementsByClassName ("add") [0]; 

// 添 加 按钮 被 单 击 的 时 候 触发 的 事件 

add onelL1CKEELEUNECELGCnRT) 4 

/ /创建 一 个 新 的 tr 

var tr-document.createElement ("tr"); 

// 在 tr 中 放 管 四 个 ca 分 别 代 表 姓 名 年 龄 TE 删除 

tr.innerHTML="<td attr='name'>énbsp;</td><td attr='age'>&nbsp;</td><td 
ene Ex! Sleep «eb Eel Clase ele Ms Ber 

// 将 tr 插入 到 table 中 

taple:appendChild(tr) 

/ /创建 一 个 空 对 象 ， 包 含 姓名 年 龄 性 别 这 三 个 值 

var ob- name Uae Oe m 

/ /将 这 个 对 象 添加 到 arr 中 

air CU SNOL, 

// 将 数据 存 入 localStorage 中 

localStorage.message=JSON.stringify (arr) ; 

} 

// 给 table 添加 早 击 事件 通过 事件 委派 的 方式 给 每 一 个 del 添加 事件 


table.onclick=function(e) { 


var target=e.target; 

// 判 新 如 采 目 标 事 件 源 的 类 名 为 del 则 继续 进行 

if (target.className=="del") { 

// 获 取 当 前 页 面 中 所有 的 类 名 为 del 的 元 条 

var dels=document.getElementsByClassName ("del"); 


/ / 38 ITA del 元 素 

Dons (eee ee MEME mea en Lc 

// 如 末 当 前 过 历 的 对 象 是 我 们 的 目标 事件 源 ， 则 获取 index fH 
if (target==dels[i]) { 


var index-1i; 


break; 

} 

by 

/ / FRSA EB SPUR SO ea 


var parent=target.parentNode; 


5 | 
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/ / table TE HUC SEC ER (Er) 
table.removeChild(parent); 
// 从 arr 中 将 当前 tr OMA Se E 
arreSolIioe(Index db 
// 更 新 localStroage 中 的 内 容 
localStorage.message-JSON.stringify (arr); 
} 
j 
} 
pecu 
</head> 
<body 
<!-- HTML 部 分 一 个 结构 简单 清晰 的 表格 --> 
<table> 
Sp 
«nb 
«ERAS ER 
«th» TE3J«/th» 
<th> 操 作 </th> 
Ee 
</table> 
sdis classo Tadd" 
n 
</ Gay 
</ body 
<< lorem zs 


效果 截图 如 图 5-4 所 示 。 


我 们 给 这 个 信息 表格 添加 了 两 组 数据 ， 在 页 面 刷 新 之 后 ， 这 两 组 数据 依旧 存在 。 单 击 
“删除 ”， 可 以 删除 一 行 的 数据 。 
效果 截图 如 图 5-5 所 示 。 


a : s 
图 5-5 
对 数据 进行 修改 之 后 ， 刷 新 页 面 也 可 以 剑 存 修改 后 的 结 林 。 
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6.1 WebSocket 概述 
6.2 WebSocket 的 原理 及 运行 机 制 
6.3 在线 五 子 棋 实 战 


6.1 WebSocket 概述 


众所周知 ，Web WH RIS HE REB 75 EP EY Voss ACH OK HR OT dn De 
We vet He aE FT AE EIER RIZR Rea ee Poin, EJ EL IL TI To fei AB 
不 是 特别 频繁 的 应 用 尚 可 ， 但 对 于 实时 要 求 蜗 、 海 量 并 发 的 应 用 来 说 束 显 得 捉襟见肘 。 当 前 
移动 互联 网 攻 动 友 展 ， 蜗 并 发 与 用 户 实时 响应 是 Web 应 用 经 党 面临 的 问题 ， 比 如 金融 证 券 
的 实时 信息 ，Web 导航 应 用 中 的 地 理 位 置 获 取 ， 社 交 网 络 的 实时 消息 推送 等 。 

传统 的 请 求 -响应 模式 的 Web 开发 在 处 理 此 类 业务 场景 时 ， 通 常 采 用 实时 通信 方案 ， 常 
见 的 是 : 

C1) wW, Jg PET HERR, Wi v 3m IE — xe B EST TRI TRI Bl ELLE TE S] 23 X 18] c a 
fit SIS VR, OR TRAE S Cm d a i HIA d A. Pe I HIE. tig EA Ted ERR 
[A] IRS ai in AIR TEI, IRA AE vie HJ a H] RA Et, TH ORI SC Va Ok, YR Bea 
ju. BRK PF 

(2) SEF Flash, Adobe Flash 通过 目 己 的 Socket 完成 数据 交换 ， 和 再 利用 Flash 又 露出 相 
应 的 接口 为 JavaScript WH, Mats SuSE mp eT AA. UE See ee va) Be ia, LALA Flash 安 
闭 率 高 ， 应 用 场景 比较 广泛 ， 但 在 移动 互联 网 终端 上 Flash 的 文 持 并 不 好 。IOS 系统 上 没有 
Flash 的 存在 ， 在 Android 上 虽然 有 Flash 的 文 持 ， 但 实际 的 使 用 效果 差强人意 ， 且 对 移动 设 
备 的 便 件 配置 要 求 较 局 。2012 年 Adobe 官方 宣布 不 再 文 持 Android 4.1 AZ, ‘Hi Flash 1E 
式 退 出 移动 终 闹 。 

传统 Web 模式 在 处 理 高 并 发 及 实时 性 需求 的 时 候 ， 会 过 到 难以 通 越 的 瓶 贷 ， 我 们 需要 
一 种 高 效 节 能 的 双 回 通信 机 制 来 保证 数据 的 实时 传输 。 在 此 背景 下 ， 基 于 HTMLS 规范 的 ， 
有 Web TCP 之 称 的 WebSocket 应 运 而 生 。 

早期 HIMLS 并 没有 形成 业界 统一 的 规范 ， 各 个 浏览 费 和 应 用 服务 器 厂商 有 大 不 同 的 实 
现 方式 ， 如 IBM 的 MQTT，Comet 开源 框架 等 。 百 到 2014 年 ，HIMLS IESU RISE A 
实际 标准 规范 ， 各 个 应 用 服务 器 及 浏览 器 厂商 逐步 开始 统一 ， 在 JavaEE 7 中 也 实现 了 
WebSocket 协议 ， 从 而 无 论 是 客户 端 还 是 服务 端的 WebSocket 都 已 完备 ， 读 者 可 以 查阅 
HTMLS 规范 ， 熟 悉 新 的 HTML 协议 规范 及 WebSocket 支持 。 


6.2 WebSocket 的 原理 及 运行 机 制 


WebSocket 是 HTMLS 一 种 狐 协 议 。 它 实现 了 浏览 器 与 服务 器 全 双 工 通信 ， 能 更 好 地 市 
省 服务 器 资源 和 带宽 并 达到 实时 通信 ， 它 建立 在 TCP 之 上 ， 同 HTTP 一 样 通 过 TCP 来 传输 
数据 ， 但 是 它 和 HTTP 最 大 的 不 同 有 以 下 几 点 : 

WebSocket 是 一 种 双 问 通信 协议 ， 在 建立 连接 后 ，WebSocket 服务 器 和 Browser/Client 
Agent 都 能 主动 的 同 对 方 发 送 或 接收 数据 ， 束 像 Socket 一 样 。 

WebSocket 需要 头 似 TCP 的 客户 问 和 服务 器 问 通 过 握手 连接 ， 连 接 成 功 后 才能 相互 通信 。 

相对 于 传统 的 HTTP. 每 次 请 求 -应 答 痢 需要 客户 病 与 服务 闹 建 并 连接 的 模式 ，WebSocket 
采用 类 似 Socket 的 TCP 长 连接 的 通信 和 模式， 一 旦 WebSocket 连接 建立 后 ， 后 续 数 据 都 以 帧 
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序列 的 形式 传输 。 在 客户 端 断 开 WebSocket 连接 或 Server vine Ren, Avia ZEAE PA m A RS tg 
重新 发 起 连接 请 求 。 在 海量 并 发 或 客户 冰 与 服务 器 交互 负载 流量 大 的 情况 下 ， 这 样 能 极 大 地 
廊 省 网 络 市 冤 资 源 的 消耗 ， 有 明显 的 性 能 优势 ， 且 客户 端 发 送 和 接收 消 已 是 在 同一 个 持久 连 
接 上 发 起 ， 实 时 性 优势 明显 。 

再 通过 客户 问 和 服务 问 交 互 的 报 文 看 一 下 WebSocket 通信 与 传统 HTTP 的 不 同 : 

E Z im, new WebSocket 实例 化 一 个 新 的 WebSocket 客户 端 对 象 ， 连 接 类 似 
ws://yourdomain:port/path 的 服务 端 WebSocket URL, WebSocket 客户 并 对 象 会 日 动 解析 并 识 
别 为 WebSocket 请 求 ， 从 而 连接 服务 端 病 口 ， 执 行 双方 握手 过 程 ， 客 户 问 发 送 的 数据 格 
式 类 似 : 


GET /Webfin/WebSocket/ HTTP/1.1Host: localhostUpgrade: WebSocketConnection: 
UpgradeSec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg--Origin: http://localhost: 8080Sec- 
WebSocket-Version: 13 


H UEF, AP ig AY WebSocket 连接 报 文 类 似 传 统 HTTP tk x, “Upgrade: 
WebSocket” 参 数值 表明 这 是 WebSocket 类 型 请 求 ,“Sec-WebSocket-Key” 是 WebSocket % 
FADA) 7" base64 编码 的 密 文 ， 要 求 服 务 闹 必 须 返 回 一 个 对 应 加 密 的 “Sec-WebSocket- 
Accept" NW, FIA Pme “Error during WebSocket handshake” 错 误 ， 并 关闭 连接 。 

服务 端 收 到 报 文 后 返回 的 数据 格式 类 似 : 

HTTP/1.1 101 Switching ProtocolsUpgrade: WebSocketConnection: UpgradeSec- 
WebSocket-Accept: K7DJLGLOoIWIG/MOpvWFB3y3FE8= 


“Sec-WebSocket-Accept” [T EL ze Ik 5 imi AH] 3 e in UTE 263 VT A CHOROS [REC JP ig 
HJ, “HTTP/1.1 101 Switching Protocols" z€zRJl vines WebSocket 协议 的 客户 问 连 接 ， 经 
过 这 样 的 请 求 -响应 处 理 后 ， 客 户 端 服 务 端的 WebSocket 连接 握手 成 功 ， 后 续 就 可 以 进行 
TCP 通信 了 。 读 者 可 以 查阅 WebSocket 协议 来 了 解 WebSocket 客户 端 和 服务 端 更 详细 的 交互 
数据 格式 。 


6.3 ”在 线 五 子 棋 实 战 


了 解 了 其 运作 原理 后 ， 就 可 以 使 用 socket.io 这 个 js 库 来 制作 在 线 五 子 棋 ， 关 于 js 库 的 
更 多 内 容 ， 大 家 可 以 访问 官网 http://socket.io 去 了 解 更 多 的 信息 。 

前 人 台 技 术 JavaScript + socket.io.js; 

后 台 技 术 Node.js + Express + socket.io 模块 。 

首先 是 HTML 代码 : 


<!doctype HTML><HTML> 
<head> 

<meta charserk— Uln—o 4) = 
<title>Five-in-Row</title> 


<meta Name—"“vIEwoork” content="widih=device width, initial seale=l" > 


<link rel="stylesheet" href="/stylesheets/index.CSS"/> 
79 | 


HTML5 


kn 


</head> 
<body> 
«!-- js 脚本 动态 生成 内 容 退 加 到 此 处 --» 


“Guy sclass=—" sense" id=" sence! im 


“cCuloen cee SOG odes casco 
scr /va er Ee Index. jc «som 
</body></HTML> 


CSS 文件 ， 处 理 一 些 简 单 的 样式 
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body { 
background: #4b4843; 
font-family: "微软 雅 黑 "; 
Color: OGE; 

}.sense{ 
widia: 6 0019527 
RE C00 x 
margine o Up on 
Dom denm ce none; 
border-bottom:none; 
OOihi ive; 
Dox Schadow: Oes lOp: sp e 
background: #8d6d45; 
borden 7p. So mide black, 

-sense duoc 

float:left, 
Margin righe Tpx; 
margin bDOCCoOm: ix 
berder—radius: ou > 
Eee ene ee ee 
Zz index: 00041; 

I. Sense COW, -Sense coli 
backoround:+4¢5 920, 
POstETON: absolute; 

} .sense .rowt 
widia: 100 ss 
height:1px; 
eine 0} 

b -Sense -COLM 
widia: lO? 
height:100; 

EOP: O; 

}. white { 

Background: e ET pd dd 
lacki 
Bore or on aere I 
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JavaScript 实现 思路 主要 为 男 出 场景 、 洛 子 绘画 、 输 局 判断 和 监听 网 络 。 


window.onload = fumetion () { 
var socket = io(), 
sence = document.getElementById('sence'), 
/ iK 


ROW = 10,NUM = ROW*ROW, 


/ / Vs Bi PZ 


senceWidth = sence.offsetWidth, 


// 每 里 棋子 宽度 
blockWidth =Math.floor( (senceWidth-ROW)/ROW ) +'px', 


// FAP Fran RUA] De T 


canDrop = Crue, 


/ FAP SRG A EVER 


color='white', 


/ /两 个 字典 ,用 来 存放 白 棋 和 黑子 的 已 沙子 位 置 ; 以 坐标 为 键 , 值 为 true; 
whiteBlocks = {},blackBlocks = {}; 


// 创 建 场景 
(eae sora C Ub d 
var el, 
/ / TERR E mpi ee 
rowline, 
/ [TERRAE E m BE 
colline; 
duo M SI URS EP ON E 4 


/ / TRE VE EE RIS] DR] Pr JA E k 

rowlane = documemntecereateElemenmt ("div"); 

COW eMeeSerAbEriblnei Glass row); 

rowline.style.top= (senceWidth/ROW) /2 + (senceWidth/ROW) *i + 'px'; 


sence.APPendChild(rowline); 


/ THREE TCU BI Fn] BC UR 2x 

colline -odocumembecereateElemen,?('grw ys 

Colline cotate DUE els 7 (col); 
colline.style.left=(senceWidth/ROW) /2 + (senceWidth/ROW) *i + 'px'; 
sence. APPendChild(colline),; 


Lore Er E 0 EE EON ECL I 


el = document.createElement('div'); 


ELE 


el.style.width lio cwn cbr 

el style nenght — bilockWwadeh 

el setAttributre( “class”, block"); 

el aise Mee Woes 0 MM E 
sence.APPendChild(el); 


var a POSTE rOn Une SEO (ake): | 

a ea Nm a er (el soda (onem I EET ee 
^; 
eso os n on c mom a 

a(S EDU SIs E ay anew A Oe 


E 


/ /判断 沙子 后 该 色 棋 是 否 连 5; 
var isHasWinner= function(id,dic) { 
Var x = “dz Position(id) .<- 


var WY =— ILC Pos aie ae f aL) SAP 


// 用 来 记录 横 , 紧 , 左 斜 , 右 斜 方 辣 的 连续 棋子 数量 


var rowCount=1,colCount = 1, leftSkewLineCount=1, rightSkewLineCount= 1; 


//tx ty (PAV, 2B, 6%, EE, FB, eb, AP, AP, Bee, 
// 每 次 数 完 某 个 方 同 的 连续 棋子 后 ,游标 会 回 到 原点 . 


var Cx; ty? 


/ T, DA FAET 5 ELL ETRA RRE, AA 5 Bi ay 


E(t} 

Ea quc (nel os om Ne (ax, cil) Ome > ms 

if( rowCount == ) return true; 

a el mE et a | 

wee on mE do COL On bos 

if( colCount == ) return true; 

poop Exc cx oco m toe Eset byt) M Ecc 
Pn Te DUO) ERE EGER OCT SES 

Ex — x Ep mq oc moss T OR ex Ev wil) heirs kaw 
lume embed EE Mu 

if( leftSkewLineCount == ) return true; 

M rdg ccce oc 4 eerste ena elise dte sve do) RT E xoa dones ded 


hineCountct;tx--;tyd4t.) 
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ip c ey mE TR obi os on Le seri Ew TI e oet atte S e end 
me ount yE e a 


if( righħhtSkewLineCcount == ) return true; 


return false; 


m 


// 处 理 对 手 发 送 过 来 的 信息 
socket on oso one nre Tate ce 
CanDrop = true; 
var el = document.getElementById(data.id); 
el.setAttribute('has-one','true'); 
aee (data. Color == "white yl 
Color = ucc 
el.setAttribute('class','block white'!); 


whiteBlocks[data.id] = true; 


if (isHasWinner (data.id,whiteBlocks) ) { 
alert ( ' ELEC," ) 
MM T 


) 

telse{ 
el.setAttribute('class','block black'); 
blackBlocks[data.id] -» true; 
pr c 


alert( PEEL LAW ' 


SPEM 


TJ s 


/ / APEC EA PR 


Sence onclick = Fur One 
var el = e.target; 
aee elem er || <l.hasAttribute ("has orel) IN el == this ) | 
returns 


el.setAttribute('has-one','true'); 


canDrop - false; 
var id = el.getAttribute('id'); 
if( color == 'whate' )( 


el.setAttribute('class','block white'); 
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whiteBlocks[id] = true; 
Se ee 
if(isHasWinner (1d,whiteBlocks) ) { 

alert (' Atti") 

—— ore 


} 


LE (color == "black" 
el -seuAttribute(’class’, ‘block black'); 
blackBlocks lid] = true; 


Socker emiti Trop one) aaa olor blacki ny; 
a blackBlocks)){ 
alert ('IBgg' 


i ok a 


) 
Je 
Wr 


AR d SEHR: 


var Express ~ requlire('express');/var app = exoress (); var http = 
require le ) cT P (app) > var 10 ~ —reduame socker-u o ET ID 

io.on('connection', function (socket) { 

Socker ent! drop one rune ondata) 

sacokete Broadeast emlit('drop one' data); 

j); 
j); 
apo Use (express. Stable Dum 
app.get('/', function(req, res) { 

Ted eend lel dirname ne HINL) 


OG 


Mego, LaSiseia( 000 Ti unction) 


Console log listening on ~: 20007); 


jg 


读者 可 以 跟 看 注释 去 理 清楚 思路 ， 再 去 完整 地 实现 整个 代码 。 
全 此 ， 我 们 利用 WebSocket 技术 完成 了 一 个 有 趣 的 在 线 五 子 棋 游戏 。 
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WAAR EL, BAIT AC OX ta BE A) RI Dy FIN KK EE Adobe 公司 的 Flash. 
如 今 ， 移 动 应 用 呈现 出 爆炸 式 的 发 展 的 态势 ， 但 是 Adobe 公司 的 Flash 却 没 有 做 出 任何 


PIDE XXE HERE. FÆ HTMLS 的 Canvas API 带 着 撼动 Flash 霸主 地 位 的 决心 强势 
登场 了 ，HTMLS Canvas API 已 经 是 在 PC、 平 板 电脑 和 手机 上 开发 路 平台 动 男 和 游戏 的 
标准 解决 方案 。 


7.1.1 Canvas 浏览 器 支持 


Firefox, Safari, Chrome 和 Opera 的 最 狐 版 本 以 及 IE9 以 上 版 本 都 支持 Canvas, fHaer f 
的 是 IE8 及 以 下 版 本 不 文 持 。 

值得 庆幸 的 是 针对 不 支持 HTMLS 的 IE6、IE7、IE8， 可 以 解决 的 方法 是 使 用 包含 一 个 
完整 的 基于 Canvas 的 JavaScript 库 ， 这 个 库 由 Google 提供 ， 称 为 ExplorerCanvas 一 或 简称 
ExCanvas。 下 载 并 将 其 作为 一 个 外 部 文件 引用 ， 如 下 所 示 : 


< > 
ccu ST ere nmusseoM cT 
<l [eme] 


ExCanvas 兼容 函数 库 下 载 地 址 : 


https://github.com/arv/ExplorerCanvas 


7.1.2 +F Canvas API 神秘 面纱 


Canvas 在 HTMLS 中 是 一 个 非常 强大 的 元 素 ， 接 下 来 ， 我 们 开始 去 学 习 它 。 我 们 可 使 用 
JavaScript 脚本 来 绘制 图 形 ， 例 如 : 画图 ， 合 成 照片 ， 创 建 动 画 其 至 实时 视频 处 理 与 泻 染 。 
而 通过 Canvas 可 以 绘制 路 人 符 、 和 矩形 、 圆 形 、 文 学 以 及 添加 图 像 。 要 使 用 Canvas 来 绘制 图 形 
必须 在 页 面 中 添加 Canvas 的 标签 。 

Canvas 元 素 必 性: 

Canvas 通过 标签 上 的 属性 定义 其 宽度 和 高 度 ， 属 性 具体 方法 如 下 : 

Canvas 是 一 对 标签 ， 我 们 在 使 用 的 时 候 必须 要 使 用 开始 标签 和 结束 标签: 


<canvas></canyas> 


width Ja Eig AY) EE RS Jes Tk n] EA TR XE 2 Ea RA a s d I1 EEN FP EG s SA 
认 值 是 300px。 

height 属性 了 画布 的 高 度 。 这 个 属性 可 以 指定 为 整数 像素 值 或 者 是 窗口 高 度 的 百分比 。 默 
认 值 是 150px. 

修改 Canvas 元 系 大 小 : 


| s 
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C1) 通过 标签 方式 修改 的 代码 如 下 : 


<canvas width="500" height="500" id="canv"></canvas> 


(2) 通过 样式 方式 修改 的 代码 如 下 : 


#canv { 
widih: S10! TS ee 
hergnt: 00px, 
j 


(CO 注意 : 用 这 两 种 方式 设置 宽 高 ， 是 存在 差异 的 ， 而 且 通过 行内 属性 的 方式 设置 宽 
高 ， 不 能 加 单位 px. Æ Canvas 标签 中 通过 属性 width. height 修改 宽 高 ， 修 改 的 是 Canvas 
元 素 的 自身 大 小 。 而 在 样式 表 中 修改 Canvas 标签 宽 高 属性 则 是 对 它 的 内 容 进行 缩放 ,如 果 比 
例 与 Canvas 本 丢 比 例 不 一 致 会 导致 图 像 的 扭曲 。 如 果 出 现 扭曲 可 以 通过 调整 Canvas HA, 
性 width. height 来 确保 比例 一 致 。 

使 用 Canvas Mifi 

请 使 用 一 个 代码 编辑 器 ， 新 建 一 个 HIMLS 的 基本 文档 。 我 们 需要 在 <body> 标 签 中 放置 
一 个 Canvas 元 素 。 为 了 可 以 清晰 地 看 到 Canvas 元 素 的 尺寸 ， 它 的 默认 尺寸 是 width 为 
300px, height 为 150px， 我 们 修改 body TRASA, Canvas 默认 透明 ， 我 们 给 它 加 一 个 
HERT. 

ARID E: HTML FND Canvas 标签 


<l DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

Sialic ke SC eua eus odie cable Jos 

<style> 

body { 

background :4444- 

j 

canvas { 

background: riii: 

j 

«/style» 

</head> 

<body> 

<!--7E Canvas 标签 中 我 们 写 入 提示 信息 ， 如 果 当 前 用 户 浏览 器 不 文 持 会 显示 标签 中 的 信息 。--> 
<canvas> 请 升级 您 的 浏览 髓 来 文 持 Canvas!</canvas> 
</body> 

<< evera = 


QR pas x RES BROAN 7-1 所 示 。 
QR DY Daas AN cK, MARUR] 7-2 Hp. 
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图 7-1 


7.1.3 ”使 用 Canvas API 绘制 图 像 


在 HTML 中 定义 好 Canvas 标签 后 ， 需 要 通过 JavaScript 进行 图 形 的 绘制 。 
Canvas 只 是 一 个 HTMLS 画布 元 素 ， 它 本 号 只 是 一 个 标签 
行 操作 : 


并 不 具备 绘制 功能 
(1) 语法 


RARE, TCR RR REAR AEE, Ba JavaScript 给 我 们 提供 的 API 来 对 画布 进 
来 进行 图 像 绘 制 。 


TA 
Eg e 
JON 


Canvas.getContext (contextID) 
(2) 参数 


。 如 来 要 
getContext(0 方 读 返 回 一 个 用 于 在 男 布 上 绘图 的 环境 对 象 ， 通 过 使 用 该 对 象 的 属性 、 方 法 


参数 contextID 指定 了 您 想 要 在 画布 上 绘制 的 类 型 


(3) 返回 值 


2d 的 字母 d 必须 要 小 写 ) ， 指 定 绘制 闫 型 为 二 维 绘图 ， 并 且 通 过 这 个 方法 返回 一 个 环境 
对 象 ， 该 对 象 导 出 一 个 二 维 绘 狗 API. 


目前 我 们 可 以 十 与 的 值 为 "2d"〈 注 
代码 清单 : 


一 个 Canvas Rendering Context2D 对 象 ， 我 们 通过 这 个 对 象 来 绘制 图 形 
通过 脚本 获取 绘图 环境 。 
< em” 


window.onload=function () { 


//1.3RF Canvas 元 素 


var can-document.getElementById("canv"); 
//2 .获取 绘图 环境 
var "Colby cepa ger Contex ( 27d"); 
| 
rio 


效果 如 图 7-3 所 示 。 
Canvas KIRA: 


画布 左上 角 为 坐标 原点 (0,0)， 横 向 为 x 轴 ， 纵 向 为 y 轴 。 效 果 如 图 7-3 所 示 。 
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图 7-3 


Canvas 元 素 绘 制图 像 的 时 候 有 两 种 方法 ， 分 别 是 : 


Context. Eu 109) 27 E fb 
Context. stroke ()/ /2 late 


style: 在 进行 图 形 绘制 前 ， 要 通过 以 下 几 个 属性 设置 好 绘图 的 样式 ， 分 别 可 以 通过 三 种 


A DORM AACE . 


rgb 7; 3X: 
context.fillStyle = 'rgb(255,0,0)';//Wt HA 
context.strokeStyle = 'rgb(255,0,0)';//ixBfzm|EWtS 
十 六 进 制 方式 : 
context.fillStyle = '#FF0000';// 设 置 绘制 颜色 
context.strokeStyle = '#FF0000';// 设 置 绘制 颜色 
单词 方式 : 
Conter nner 
context.strokeStyle = 'red';//KBEA nme 
颜色 的 表示 方式 : 


直接 用 颜色 名 称 :"red""green""blue" 

十 六 进 制 颜色 值 : "#EEEEFF" 

rgb(1-255,1-255,1-255) 

rgba(1-255,1-255,1-255,1% HA JE) 

ZA HiT FR KEE 

定义 和 用 法 

fillRect() 方法 绘制 “已 盾 色 ”的 窍 形 。 默 认 的 填充 颜色 是 黑色 。 
ort 

使 用 fillstyle 属性 来 设置 用 于 填充 绘图 的 颜色 、 渐 变 或 模式 ( 后续 
JavaScript 语法 : 


> 


节 会 介绍 渐变 填充 ). 


者 


HTML5 
EE kes 


Context manne cuo e y, width,  nNeignit), 


参数 值 如 表 7-1 所 示 。 


dA 7-1 

参数 HOR 

x 矩形 左上 角 的 x 坐标 

y FIBA EAA y MER 
width 矩形 的 宽度 ， 以 像素 计 
height AIBA es, MRR 

代码 请 单 : Ze TELAT e 
XXe ong 


window.onload=function () { 

J AL BoE Cavers Jin 

var can=document.getElementByld("canv") ; 
//2 .获取 绘图 环境 

var cob can. E nhe c 

//3. 设 定 样式 TAFE, blue 

je 的 加 出 te 

//A.3F383875. 24 left,top,width,height 
Cobas Tedoeteseas (a0, 50, 200 2400). 12 

j 

</ Semon 


效果 如 图 7-4 所 示 。 


图 7-4 


绘制 窍 形 框 : 定义 和 用 法 。 
strokeRect(0 方 法 绘制 一 个 摘 边 效果 的 窍 形 。 笔 触 的 默认 两 色 是 站 色 。 


(Dim 


请 使 用 strokeStyle 属性 来 设置 笔触 的 颜色 、 渐 变 或 模式 (后 续 章 节 会 介绍 渐变 


EM 


填充 )。 


HTMLS5 画布 一 一 在 线 绘图 板 
JavaScript 语法 为 : 


Context. etrokeReclt (x Vy, width, height; 


参数 值 如 表 7-2 所 示 。 


表 7-2 

2 X Ho x 

x 矩形 左上 角 的 x 坐标 

y AUEZc Ef y 坐标 
width 矩形 的 宽度 ， 以 像素 计 
height 和 矩形 的 高 度 ， 以 像素 计 

代码 清单 : 绘制 矩形 框 。 
<SCript> 


window.onload Tune on 

JJ Lo eR Cet EU ples 

var can=document.getElementByld("canv") ; 
/ /2 .获取 绘图 环境 

var cob- can. Jet Context (2d); 

//3. 设 定 样式 填充 颜色 blue 线 粗 细 5 

CoBbJ ~Strokesry le—"'bine > 

eobJ l inenidth=5,; 

E E BRM left,top,width, height 
Coby. SErOKeR CCE (50750, 200,200). 

j 

< /Scripi- 


效果 如 图 7-5 所 示 。 


图 7-5 


绘制 路 径 : 
beginPathO 开 始 一 条 路 径 ， 或 重 置 当 前 的 路 径 。 
moveTo(x, y)W EE ^x y). 


| 


HIML5 
| ss ea 
lineTo(: 添加 一 个 新 点 ， 然 后 创建 从 该 点 到 画布 中 最 后 指定 点 的 路 径 〈 该 方法 只 议定 
位 置 并 不 会 绘制 线条 )。 
closePath(): 创建 从 当前 点 到 开始 点 的 路 径 。 
beginPath()-j closePath() 结合 使 用 ， 主 要 作用 是 避免 绘制 之 间 的 相互 影响 。 
Aas, 绘制 第 形 框 。 


Sie veal ou = 


window.onload=function() { 

/ /1.3kRKX Canvas 7638 

var can-document.getElementById("canv"); 
//2 .获取 绘图 环境 

var cobj=can.getContext ("2d"); 

//3 .绘制 线条 

cobj .peginPath () ; // 开 始 绘制 路 径 

cob} .moveTo (50,50) /i A (50,50) 
cobj .lineTo (100,100) ;//22 iil BAA PR (100,100) 的 直线 
cobj.closePath ();//AG2z mille 
cobj.lineWidth-5;//ix BY. 
cobj.strokeStyle-2"blue";//ix HEC 
cobj.stroke ();// 绘 制 当前 路 径 厦 色 


//4 .绘制 填充 三 角形 

cobj .beginPath () ; // 开 始 绘制 路 径 

cob} .moveTo (50,120) ;//MEH Pit At (50,120) 
cobj .LineTo (90,160) ;// 绘 制 到 坐标 (90,160) 的 直线 
cobj .lineTo (260,120) ;// 绘 制 到 坐标 (260, 120) 的 直线 
cobj.closePath ();// 闭 合 绘制 路 径 

oD aa e a ee 

cob ino An 


j 
ciem 


效果 如 图 7-6 所 示 。 


图 7-6 


EM 


HTML5 画布 一 一 在 线 绘图 板 


绘制 圆 形 或 者 椭圆 : 

arc() 方 法 创建 弧 / 曲 线 〈 用 于 创建 圆 或 部 分 圆 )。 

(CO 提示 

如 需 通 过 arc) 来 创建 圆 ， 请 把 起 始 角 设 置 为 0， 结 束 角 设 置 为 2*Math.PI， 如 图 7-7 


Hu arc(100,75,50,0*Math. PI,1.5*Math. PI) 
Rau arc(100,75,50,0,1.5*Math. PI) 
ce fA: arc(100,75,50, 0*Math. PI,1.5*Math. PI) 


JavaScript 语法 : 
Gontext are(x yy eSsAngle eaAngle, counterclockwise); 


参数 值 如 表 7-3 所 示 。 


表 7-3 
2 X Ho x 
x 圆 的 中 心 的 x 坐标 
y 圆 的 中 心 的 y 坐标 
r 圆 的 半径 
sAngle 起 始 角 ， 以 弧度 计 。〔 弧 的 圆 形 的 三 点 钟 位 置 是 0 度 ) 
eAngle 结束 角 ， 以 弧度 计 
counterclockwise 可 选 。 规 定 应 该 逆 时 针 还 是 顺 时 针 绘 图 。false = 顺 时 针 ，true = 逆 时 针 
代码 清单 : 绘制 圆 形 框 。 
Sis oor 


window.onload- function () 4 

/ et Canvas 亲 

var can=document.getElementByld("canv") ; 

//2. 获 取 绘 图 环境 

var Cobj—Can.geeConzexe ("2d"); 

/ /3 .绘制 圆 形 

cobj.beginPath () Hm 

/ /绘制 以 (60, 60) 为 圆心 , 50 为 半径 长 度 , 从 0 度 到 360 RE (PI 是 180 度 ) ,最 后 一 个 参数 代表 


MTE DEFE 
93 | 


HIML5 
| SET ET 
Coles) Serco (40, ae 00, OR SOO ME DT MEE OU ne: 
cobj.lineWidth 0 ARE 
elo e SMOKES eve = We lne s CSS IF SSTRC 
cobj .stroke();// 绘 制 空 心 的 ， 当 然 如 果 使 用 £111 那 就 是 填 序 了 


j 
siue 


效果 如 图 7-8 所 示 。 


图 7-8 


绘制 弧 线 : 

arcTo() 方 法 在 画布 上 创建 介 于 两 个 切线 之 则 的 弧 / 曲 线 。 
四 提示 

请 使 用 stroke) Z KES ALA) 58 7) 8 9A 

JavaScript 语法 : 


Contex ll eer I Nl ees ie) 


参数 值 如 表 7-4 Br. 


表 7-4 

2 数 HER 
xl 弧 的 起 点 的 x 坐标 
yl 弧 的 起 点 的 y 坐标 
x2 弧 的 终点 的 x 坐标 
y2 弧 的 终点 的 y 坐标 
T 弧 的 半径 

[XE ER. £A. 
eoe 


window.onload=function () { 


//1.3kHX Canvas Juz 


| 4 


HTML5 画布 一 一 在 线 绘图 板 
var can-document.getElementById("canv"); 
//2 .获取 绘图 环境 
var cobj=can.getContext ("2d"); 
//3. 绘 制 弧 线 
cobj .peginPath () ;// 开 始 绘 制 路 径 
cobj.moveTo(100,200);// 0 L4 
cob. r eo 00, 100,200, 00955 Ones E os 
cobj.lineWidth = 2.0;//Ain wile 
EOD a a a 
cobj .stroke () 7; // 绘 制 衬 心 的 ， 当 然 如 条 使 用 fi11 那 就 是 填 序 了 。 


< 


效果 如 图 7-9 所 示 。 


图 7-9 
绘制 二 次 贝 赛 尔 曲线 : 
quadraticCurveTo()77 iA: 通过 使 用 表示 二 次 贝 压 尔 曲 线 的 指定 控制 点 ， 回 当前 路 径 添 加 
ee ee 
| 


QEF 

二 次 贝 塞 尔 曲线 需要 两 个 点 。 第 一 个 点 是 用 于 二 次 贝 塞 尔 计算 中 的 控制 点 ， 第 二 个 点 是 
曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ， 那 么 请 使 
用 beginPathO0 和 moveTo0 方 法 来 定义 开始 点 ， 效 果 如 图 7-10 所 示 。 


开始 点 (20, 20) 结束 点 (200, 20) 


控制 点 (20，100) 
图 7-10 
开始 点 : moveTo(20, 20) 
结束 点 : quadraticCurveTo(20, 100, 200, 20); 


ELE 


HTML5 


E 


JavaScript 语法 : 


SE S E iesur eolec eco 二 


参数 值 如 表 7-5 所 示 。 


a 1-5 
cpx USE AR PEG AY x 坐标 
cpy DUZER ARPES y 坐标 
X 结束 点 的 xX 坐标 
y 结束 点 的 y 坐标 


代码 清单 :绘制 二 次 贝 赛 尔 曲 线 。 


Or > 


window.onload=function () { 


/ 13 


Canvas jes 
can-document.getElementById ("canv"); 
.获取 绘图 环境 

CODI- can: Jer Contei du 

ZRMI 

.beginPath () ;// 开 始 绘制 路 径 
.moveTo(30,200) ;// 创建 开始 点 

{elec ise eae Cui le (dE 79) - LOU, 200, .00 
.lineWidth = 2.0;// 线 的 宽度 

Se cokes he = eH 

. Stroke () ; / /绘制 军心 的 ， 当 然 如 条 使 用 fill PRERA T -o 


</ Serio 


效果 如 图 7-11 所 示 。 


| 9% 


儿 7-11 


HTMLS5 画布 一 一 在 线 绘图 板 

ZA il] — Xx Ul 2E Hl £k: 

定义 和 用 法 : bezierCurveTo() 77 3; fii H] RREA M 3E AK HZ HR ETE. [a] SHER AS 
深 加 一 个 后 。 

ort. 

三 次 贝 塞 尔 曲线 需要 三 个 点 。 前 两 个 点 是 用 于 三 次 贝 塞 尔 计算 中 的 控制 点 ， 第 三 个 点 是 
曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ， 那 么 请 使 用 
beginPathO0 和 moveTo() 方法 来 定义 开始 点 ， 效 果 如 图 7-12 所 示 。 


开始 点 (20, 20) 结束 点 (200, 20) 
控制 点 1 (20, 100) 控制 点 2 (200, 100) 
图 7-12 


开始 点 : moveTo(20, 20) 
结束 点 : bezierCurveTo(20, 100, 200, 100, 200, 20) 
JavaScript 语法 : 


contet. Lezio r urve ol re iD 


参数 值 如 表 7-6 所 示 。 


表 7-6 
5 JU fii o x 

cplx 第 一 个 贝 塞 尔 控制 点 的 x 坐标 
cply 第 一 个 贝 塞 尔 控制 点 的 y 坐标 
cp2x BA WER PS BIL AY x Ab 
cp2y 第 二 个 贝 塞 尔 控制 点 的 y 坐标 

X 结束 点 的 x 坐标 

y 结束 点 的 y 坐标 

代码 清单 : 绘制 三 次 贝 蹇 尔 曲线 。 

oon 


window ondes fume Tom 

E Cea EU. es 

var can-document.getElementById("canv"); 
/ /2 .获取 绘图 环境 

var cob- can:-get emicuit c 

/ 1/3 . £2 8 exc 

cobj .beginPath () ;// 开 始 绘制 路 径 
cobj.moveTo(20,20);// &|&JF*5 


ELA 


HTML5 
EE kes 


Cob. pez Tero bua teo 20 EO 19.0. 1510 200 > 0 
cobj.lineWidth 00 ARE 

elo e SMOKES eve = We lne s CSS IF SSTRC 

cobj .stroke();// 绘 制 空 心 的 ， 当 然 如 果 使 用 fill Aes I 


j 
ciuem 


AUR UE] 7-13 Bras. 


Sd 


图 7-13 


绘制 渐变 : 
Context 对 和 象 可 以 通过 createLinearGradient() 和 createRadialGradientO 两 个 方法 创建 渐变 对 
象 ， 这 两 个 方法 的 原型 如 下 : 
OQbvyvect oreateLinearcradient (xl, yl; x2, y2); 
创建 一 个 从 G1，yJ) 点 到 (xz2，y2) 点 的 线性 渐变 对 象 的 代码 如 下 所 示 。 
OpIect oreatekadial Gradient (Kil yard ex DE Es 
创建 一 个 从 以 (x1，y]) 扣 为 加 心 、r1 AF eA BIA (x2, y2) AAD. 12 为 半径 的 
的 径 问 渐变 对 象 的 效果 如 图 7-14 BAN 


图 7-14 


渐变 对 象 创建 完成 之 后 必须 使 用 它 的 addColorStop0 方 法 来 添加 颜色 ， 该 方法 的 原型 
如 下 : 


EM 


HTMLS 画布 一 一 在 线 绘图 板 


void addColorstop (position, Color); 


JE position 表示 添加 颜色 的 位 置 ， 取 值 范 围 为 [0，1]，0 表示 起 点 ，1 表示 终点 ; color 
表示 添加 的 颜色 ， 取 值 可 以 是 任何 CSS 颜色 值 。 


线性 渐变 : 
代码 清单 :绘制 线性 渐变 。 
Se ieee 


window.onload=function() { 

REC Hem juss 

var can-document.getElementById("canv"); 

//2 .获取 绘图 环境 

Var Cob j—Can. getContext ("2d"); 

//3. 创 建 线性 渐变 参数 为 开始 坐标 x y 结束 坐标 x y 

var Grad—Coby .createhinearGradirenk (20,720,220, 220) ; 
grad.addColorStop (0,"red") ;//WME AEM 开始 颜色 red 
grad.addColorStop(0.5,"green") ;//WHZePEMIZ FIRB, green 
grad.addColorStop(1,"blue");//ix HZXTEXAE FEILER blue 
cobj.fillStyle-grad;//W BHAIHZRREXX AM 
cobj.fillRect(20,20,200,200);//£zW| tame 


rio 


AUR ul] 7-15 Bras. 


图 7-15 
镜像 渐变 : 
代码 清单 : 绘制 镜像 渐变 。 
ea 


window.onload=function () { 
//1.3R Canvas Jus 


var can=document.getElementByld("canv") ; 


9 | 


HTML5 
//2 .获取 绘图 环境 
var CObj—Can.getContext ("2d"); 
/13 BERR 参数 为 第 一 个 圆 坐 标 x1 yl 半径 rl 第 二 个 圆 坐 标 x2 y2 半径 r2 
var orad=eob] createRadialoradipne (i207 1707 40 1407 14107907; 
oracd eddColor rop (0 redi); 
oracaddCcolorSeEop(l greerm); 
cobj.fillStyle=grad;//KHIARERAMS 
Gelog) tee (20, 20, 220,220) 7/2/25 s ps rm E 


| 
ee 


BRUNA 7-16 Bra. 


图 7-16 


阴影 效果 也 是 我 们 利用 的 表现 方式 ， 阴 影 有 四 个 状态 值 控 制 ， 分 别 是 shadowBlur， 
shadowOffsetX , shadowOffsetY 和 shadowColor 。 其 中 shadowBlur 为 阴影 的 像素 模糊 值 ， 
shadowOffsetX 和 shadowOffsetY 为 阴影 在 x Hg y 轴 上 的 偏 移 值 ，shadowColor A BH eiit Ce 
值 ， 其 中 默认 的 值 是 前 三 个 值 都 为 0， 最 后 一 个 值 设 置 为 透明 黑色 。 只 需 修 改 其 中 的 两 个 值 
就 可 以 显现 出 来 阴影 效 末 。 

阴影 名 用 API 如 表 7-7 Ban. 


表 7-7 
属 性 Hi x 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 
shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 距 形 状 的 水 平 距离 
shadowOffsetY 设置 或 返回 阴影 距 形 状 的 垂直 距离 


代码 清单 : 绘制 阴影 。 


SO a oe 


window.onload=function () { 
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HTML5 画布 一 一 在 线 绘图 板 
var can-document.getElementById("can"); 
can.width=300; 
Cam. height= 0V0; 
var Too Can JerConeexe (2d) 
oc.shadowOffsetX-5; //x 轴 偏 移 
oc.shadowOffsetY-5; //y Shin 
oc.shadowBlur=10; // 阴 影 的 模糊 级 别 
oc.shadowColor-2'"456524C"; //DHsz BW, 
oG. til lReer (507,750, 710907 1010) * 


<—/ Seige 


AUR UE] 7-17 Bras. 
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7.2 +28 Canvas 国 板 


AYE, d&f]0E—^ ii EETA, GREE NAS, Beat na EIER 
皮 擦 除 不 满意 的 部 分 。 在 HTMLS 中 ， 如 果 需 要 擦 除 我 们 在 Canvas 画布 上 绘制 的 某 一 部 分 
图 像 ， 我 们 就 需要 一 个 可 以 擦 除 Canvas 元 素 上 图 像 的 “橡皮 擦 ”。 

Canvas 中 的 “橡皮 探 ” 

clearRect0) 方 法 清空 给 定 答 形 内 的 指定 像素 ， 并 且 用 一 个 表明 的 闫 色 填 充 它 。 这 就 是 
HTMLS 给 我 们 提供 了 一 个 “橡皮 擦 ”。 

JavaScript 语法 : 


Context. clearRect (和 
参数 值 如 表 7-8 Bras. 
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KAREA 
d 7-8 
2 BR Ho x 
x 要 清除 的 矩形 左上 角 的 x 坐标 
y 要 清除 的 矩形 左上 角 的 y 坐标 
= 要 清除 的 矩形 的 宽度 ， 以 像素 计 
height 要 清除 的 矩形 的 高 度 ， 以 像素 计 
代码 清单 : 页 面 绘制 一 个 填充 好 的 欧 色 和 矩 形 。 
Stelios ne 


window.onload=function() { 

/ /1.3kRKX Canvas 7638 

var can-document.getElementById("canv"); 
/ /2 .获取 绘图 环境 

var Cob Ca oe Context rele 

//3. 绘 制 弧 线 
cobj.beginPath () ;//FPeaZs elit 4t 
cobj.fillStyle-2'blue'; 

exer sae a: Tee evene (240, 210, LOO, 3092 


j 
< /Ser > 


清空 整个 画布 。 
Cobi elearRecre (0 Wr ge 


效果 如 图 7-18 所 示 。 


图 7-18 


代码 清单 : 通过 使 用 clearRect0 方 法 清空 给 定 窍 形 内 的 指定 像素 。 


<SCripi- 
window.onload=function (){ 


/Conv 
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EE 
HTMLS5 画布 一 一 在 线 绘图 板 
var can-document.getElementById("canv"); 
//2 .获取 绘图 环境 
var Coby Cam. get Contex cd 
//3. 绘 制 弧 线 
cobj.beginPath () ;//F Raza Blei 4 
col t1listyle—'bilue’; 
Gop ec (210.210) 2 OO, OO) 2 
cobj.clearRect(0,0,300,300); //#@ePh MAAK) Ka SABA 300px m 
SITO 


VASE IBONEPS 


效果 如 图 7-19 所 示 。 


图 7-19 


7.3 绘制 复杂 图 形 


Canvas 路 径 是 指 纯 以 贝 埃 尔 曲线 为 理论 基础 的 区 域 绘制 方式 ， 绘 制 时 产生 的 线条 称 为 路 
径 。 路 径 由 一 个 或 多 个 直线 段 或 曲线 段 组 成 ， 或 者 是 经 过 精确 计算 画 出 的 特殊 网 形 ， 路 径 是 
Canvas 实现 绘图 的 基础 。 

1. 绘制 复杂 图 形 API 介绍 

在 平时 的 使 用 中 ，Canvas 给 我 们 提供 的 矩形 绘制 方法 是 无 法 满足 我 们 的 需求 的 ， 因 此 我 
们 需要 绘制 复杂 形状 的 方法 。 

Canvas 给 我 们 提供 了 以 下 几 个 绘制 复杂 图 片 的 API: 

beginPath(): 开始 一 条 路 径 ， 或 重 置 当 前 的 路 径 。 

moveTo(x, y): 设置 线段 起 点 坐标 (x,y) 

lineTo(x, y): 添加 一 个 新 点 ， 然 后 创建 从 该 点 到 画布 中 最 后 指定 点 的 线段 〈 访 方法 只 
设 定位 置 并 不 会 绘制 线条 )。 

closePath(): 创建 从 当前 点 到 开始 点 的 路 径 。 
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kee 
fill). stroke): 圳 充 形状 或 绘制 空心 形状 。 
2. API 使 用 步骤 如 下 : 


(1) 
(2) 
(3) 
(4) 


开始 绘制 路 径 beginPath(). 

使 用 moveTo(x, y). lineTo(x, y) £z HE. 
闭合 路 径 closePath(). 

fill0 填 充 形状 或 strokeO 绘 制 边框 形状 。 


绘制 三 角形 、 滤 形 : 

绘制 三 角形 通常 我 们 需要 确定 3 个 点 ， 绘 制 矩 形 的话 ， 
strokeRect(), fillRect() Wi. 

代码 清单 : 绘制 三 角形 、 滤 形 。 
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<Scrlo 

window.onload=function () { 

var Canvas=document.querySelector('#can") ; 
var cobj-Canvas.getContext('2d'); 

Canvas .width=400; 

Canvas .height=400; 

// 绘制 三 角形 

cobj .peginPath () ;// 开 始 绘 制 路 径 

cobj.moveTo (0 0 人 US 
cobj .lineTo (50,150);// 绘 制 到 坐标 (50,150) 的 线段 
cobj.lineTo 0 0 0 HARES 
Cop Toe Po mille 
cobj.lineWidth-2; // 设 置 线 条 粗细 2px 

cobj .strokeStyle="blue";// 设 置 绘制 边框 闫 色 
cobj.stroke();//JfF*ü&£ztl 


// 绘制 填充 三 角形 

cobj.beginPath () ;/ /开始 绘 制 路 径 

cobj.moveTo (320, 50) ; // REMITE er (320,50) 
cobj.lineTo (270,120) ;//2 il BAA PR (270,120) WAREZ 
cobj.lineTo (370,120) ;//2 il BAA PR (370,120) WAEEZ 
cobj.closePath 0 ;// 团 合 绘制 路 径 

cobj .fi11Style="#009494";// 设 置 填 充 颜色 

Goby). f111()7// Fara 

// 绘制 描 边 矩形 

cobj.strokeStyle='#888'; 


Canvas A 25 Fe $e HE T 


cobj.strokeRect(50,200,100,100); WE em AAR (50,200) FEAT 100 fH 100 


// 绘制 填充 矩形 
cob}.fillStyle='rgb (244, 67,21) ' 


cobj.fillRect(180,200,100,100); //NfüxEXxuünk AAR (50,200) AES 100 m 100 


j 
“rio 


HTML5 画布 一 一 在 线 绘图 板 
效果 如 图 7-20 AIAN o 


图 7-20 
绘制 五 边 形 : 


现在 我 们 先 绘制 一 个 五 边 形 ， 思 路 如 图 7-21 所 示 。 五 边 形 就 是 在 一 个 圆 上 确定 $ 个 点 
两 两 相连 ， 当 我 们 知道 2 个 点 时 就 可 以 通过 勾 股 定理 推 算 出 加 的 半径 。 


x1:160 y1:160 


图 7-21 


Nin: 绘制 五 边 形 。 


< eon 

window.onload=function() { 

var Canvas=document.querySelector('#can"); 
var cobj-Canvas.getContext('2d'); 
Canvas.width-500; 

Canvas hergnr—500; 

// 绘 制 多 边 形 
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// 勾 股 定理 得 到 半径 工 

// 第 一 个 点 坐标 (80,80)， 第 二 个 点 坐标 (160,160) 

er Me scence td. 0 0 (0 0 0 000 

war lo=5p d de 

var a=360/b; 

cob beglineath (yn 

for(var i=0;i<b;i++){ // 采 用 循环 依 雇 找到 下 一 个 点 位 置 

eos evo oo Marni ees ETE Pr oO) “a, oO Marke sim Se) 
MERET dsl) ene ee 

j 

Goby. GC oesepatia 

cobj.strokeStyle="red"; 

COb7).s = roke (j= 


} 
Scrip 


效果 如 图 7-22 所 示 。 


图 7-22 


PPR II Ze ill PRL 

AR EPS RB, RIE TI hill KI BL Poly 
Poly(x, y, xl, yl, n) 

参数 1: 第 一 个 坐标 点 X，y: 

参数 2: 第 二 个 坐标 点 X1，y1; 

参数 3: 边 数 n。 


me On ARa e y ea 
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// 勾 股 定理 得 到 半径 
var r=MaTth. Sqrt ( (x1l=x) = (xl=x) r (yl=y) = n 


/ / RILE UAR JE 


var a 999 md 


cobj.beginPath () ; 


// 采 用 依次 找到 下 一 个 点 

fOr (var 1=0? igs LFF) { 

cob line lo Maen cos( (a pM ACE Meneses 5) “Mat 
IB ETE TSO ota) 

j 

Oleg SC Lose Ela c 

cobj.stroke(); //W Riz HUTA Ee £i11() 二 

j 


代码 清单 : XÉDSERDREERS IUS TI DE. 


eere en 

window.onload=function() { 

var Canvas=document.querySelector('#can"); 
var cob j=Canvas.getContext ('2d') ; 

Canvas .width=350; 

Canvas .height=350; 

/ /绘制 多 边 形 

Poly 919. - 00 Lod, 7 S0. 5) 

Poly (207.207 14077140776) 

Poly (90,240,140,240,10) 


/ /多 边 形 绘制 函数 Poly 

Ome LO EO MO ye IL Ale sad 

var r-Math.sqrt((xl-x)* (xl-x)-*(yl-y)*(yl-y)); 

var a-360/n; 

Cob]. Sbeqinrarh() ; 

fOr Viele 1=0? ey ee) { 

Solo db itae We (ME COs (eas des cede Vedan Pl oO vi Ma (a Mak 
he Suny NSO) ia) 

j 

cobyedtosePathu 

CoD e troke); 

j 


j 
cioe 


Ne 
da 
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BURMA] 7-23 所 不 。 


图 7-23 


7.4 绘制 文本 


Canvas 给 我 们 提供 了 绘制 文学 的 方法 。 


绘制 文学 主要 属性 和 方法 : 
font 属性 用 来 设置 或 返回 画布 上 文本 内 容 的 当前 字体 属性 。 该 属性 的 用 法 与 CSSfont 属 
性 使 用 方式 相同 ， 例 如 : 


Coie ee eo ae e Gey 


font 属性 的 默认 值 如 表 7-9 所 示 。 


表 7-9 


默认 值 : | 10px sans-serif 


textAlign 属性 用 来 设置 或 返回 文本 内 容 的 当前 对 章 方式 。 

通常 ， 文 本 会 从 指定 位 置 开 始 ， 不 过 ， 如 果 您 设置 为 textAlign='"right" 并 将 文本 放置 到 
位 置 130， 那 么 会 在 位 置 150 结束 。 

textAlign 属性 的 默认 值 如 表 7-10 所 示 。 


表 7-10 


默认 值 : | start 


Solos coge stare iia 


表 7-11 
值 fii x 
start 默认 。 文 本 在 指定 的 位 置 开始 
end 文本 在 指定 的 位 置 结束 
center 文本 的 中 心 被 放置 在 指定 的 位 置 
left 文本 左 对 齐 
right 文本 右 对 齐 


108 


HTMLS i45 —— 12x 25 lik 
图 7-24 演示 了 textAlign 属性 值 对 齐 方式 。 


textAli gn- "start"; — 
textAlign- "end"; Sata 
textAlign- "left"; HBE 
textAlign="center"; HBE 
textAlign- "right"; HBE 

lk 7-24 


textBaseline 属性 设置 或 返回 在 绘制 文本 时 的 当前 文本 基线 。 
属性 值 如 表 7-12 所 示 。 


表 7-12 
值 fii — 3X 
alphabetic 默认 。 文 本 基线 是 普通 的 字母 基线 
top 文本 基线 是 em 方 框 的 顶端 
hanging 文本 基线 是 悬挂 基线 
middle 文本 基线 是 em 方 框 的 正中 
ideographic 文本 基线 是 表意 基线 
bottom 


文本 基线 是 em 77 HE AY JER Sita 
图 7-25 演示 了 textBaseline 属性 支持 的 各 种 基线 。 


. top 
hanging . LLL 


middle 


A il € bottom 
ideoaraphic 


图 7-25 
fillTextO 方 法 在 画布 上 绘制 填 色 的 文本 。 文 本 的 默认 颜色 是 黑色 。 


Javascript 语法 : 


Contexto ri erie (Cext cc i, mao 


参数 值 如 表 7-13 所 示 。 


表 7-13 
2 M jo X 
text 规定 在 画布 上 输出 的 文本 
x 开始 绘制 文本 的 x 坐标 位 置 〈 相 对 于 画布 ) 
y 开始 绘制 文本 的 y 坐标 位 置 《 相 对 于 画布 ) 
max Width 


可 选 。 允 许 的 最 大 文本 宽度 ， 以 像素 计 


strokeTextO 方 法 在 画布 上 绘制 文本 〈 没 有 填充 )。 文 本 的 默认 硕 色 是 黑色 。 
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JavaScript 


语法 : 


Context etrokeltexb (text x y maxWideh), 


参数 值 如 表 7-14 rane 


表 7-14 
数 fii 述 
规定 在 画布 上 输出 的 文本 
开始 绘制 文本 的 x 坐标 位 置 ( 相 对 于 画布 ) 


y 开始 绘制 文本 的 了 坐标 位 置 《相对 于 画布 ) 
max Width 可 选 。 允 许 的 最 大 文本 宽度 ， 以 像素 计 
代码 清单 : 绘制 文本 
<Seripe- 


window.onload=function () { 


var can=document.getElementByld("can") ; 
can.width=500; 
can Menchz— 500; 


Vat 1OC=Can. dec ontexrt ("2d"); 


COBI 
coL 
CoD 
CoB 
ole 
(OI, 
Coby 
eo 
Colby 
j 


.beginPath() 

.font="36px 微软 雅 黑 "， 

.ShadowOffsetX-2; 

.ShadowOffsetY-2; 

.ShadowBlur-5; 

. shadowColor="#56524C" 

.ClosePath() 

.StrokeText (" 日 光照 到 的 一 切 地 方 都 有 阴影 "，20,200) ; 
.fillText ("&EÁA Aah B5",20,100); 


ccm 


BRUNA 7-26 Bra. 
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每 个 人 都 是 一 座 孤 岛 


目光 照 到 的 一 切 地 方 都 有 阴影 


图 7-26 


HTMLS5 画布 一 一 在 线 绘 图 板 


7.5 ”图片 操作 


Canvas 允许 将 图 像 文件 插入 画布 ， 做 法 是 读 取 图 片 后 ， 使 用 drawImage 方法 在 画布 内 进 
ITER. 


7.5.1 绘制 图 片 方 法 


定义 和 用 法 

drawImage0 方 法 在 画布 上 绘制 图 像 、 画 布 或 视频 。 

drawImage() 方 法 也 能 够 绘制 图 像 的 某 些 部 分 ， 以 及 增加 或 减少 图 像 的 尺寸 。 
(1) 语法 1 

定位 图 像 : 


context.drawImage (img,x,y); 
(2) 语法 2 
定位 图 像 ， 并 规定 图 像 的 客 度 和 局 度 : 


context drawlmage (img; ZH Vv width, height, 
(3) 语法 3 
BJR, FFE Canvas KE ALLEY BoP : 
context- draw mage (me sx SWEET yale nda el 


参数 值 如 表 7-15 所 示 。 


表 7-15 
2 数 fi 述 
img 规定 要 使 用 的 图 像 、 画 布 或 视频 
SX Aye. FPA BY UIE) x 坐标 位 置 
sy Aye. FPR BITE y 坐标 位 置 
swidth FYE. SOUPE RAY HEE 
sheight FYE BCE) RY te PE 
x 在 画布 上 放置 图 像 的 x 坐标 位 置 
y 在 画布 上 放置 图 像 的 y 坐标 位 置 
width 可 选 。 要 使 用 的 网 像 的 宽度 《伸展 或 缩小 图 像 ) 


height 可 选 。 要 使 用 的 岁 像 的 高 度 《〈 伸 展 或 缩小 图 像 ) 
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7.5.2 ”在 画布 中 绘制 一 张 图 片 


isis: FEI AE ZS till SKA Hr. 


CSCO 


window.onload=function () { 

J Labs Be Cetaeus jhe 

var can-document.getElementById("canv"); 
/ / 2 .获取 绘图 环境 

var cobgecan-getContesxt("2d'5 

//3 .绘制 图 片 

var Img=new Image(); 

Img .onload=function() {// 等 待 图 片 加 载 完 成 再 进行 绘制 
cob- droawlmage (Img, 0 0 > 

j 

dope coser po 

} 

«eene OE > 


AUR uk 7-27 Bras. 


T=21 


7.6 像素 操作 


本 节 主 要 介绍 Canvas 在 图 像 像素 数据 操作 方面 的 常用 API， 如 表 7-16 Dra. 
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表 7-16 
Ao d fi x 
createImageData() GET]. 22 ELIT] ImageData 对 象 
getImageData() 返回 ImageData 对 象 ， 该 对 象 为 画布 上 指定 的 矩形 复制 像素 数据 
putImageData() 把 图 像 数 据 (从 指定 的 ImageData 对 象 ) 放 回 画布 上 


createImageData() 方法 ， 有 两 个 版 本 的 ereateImageData() 方法 : 
(D 以 指定 的 尺寸 〈 以 像素 计 ) 创建 新 的 ImageData 对 象 : 


var imgData=context.createImageData (width, height) ; 


(2) 创建 与 指定 的 另 一 个 ImageData 对 象 尺 寸 相同 的 新 ImageData WR (ASH ARNA 
数据 ): 


var imgData=context.createImageData (imageData) ; 


参数 值 如 表 7-17 所 示 。 


表 7-17 
width ImageData 对 象 的 宽度 ， 以 像素 计 
height ImageData 对 象 的 高 度 ， 以 像素 计 
imageData 另 一 个 InageData 对 象 


getImageData() 方 法 : 

getImageData() 方 法 返回 ImageData 对 象 ， 该 对 和 象 捞 贝 了 画布 指定 矩形 的 像 权 数据 。 
返回 对 象 身上 有 data, width, height 属性 ， 参 考 如 图 7-28 所 示 : 

data 属性 : 体 存 每 个 像素 的 rgba 1E; 

对 于 ImageData 对 象 中 的 每 个 像素 ， 都 存在 着 四 个 信息 ， 即 RGBA 值 : 

R- 红色 (0-255) 

G- 绿色 (0-255) 

B- f (0-255) 

A -alpha 通道 (0-255; 0 是 透明 的 ，255 是 完全 可 见 的 ) 

例如 这 个 data 数组 : 


| ] 


数组 中 下 标 0 一 3 代表 第 一 个 像素 ， 信 息 依次 为 rgba(10，195，230，255)， 第 二 个 像素 
为 下 标 4 一 7， 后 面 像素 依次 类 推 。 

height 属性 : 保存 对 象 高 度 ; 

width 属性 : 保存 对 象 宽 度 。 

效果 如 图 7-28 所 示 。 
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r3 LI 
实战 至 典 
Y ImageData 
¥ data: Uint8ClampedArray[98888] 
P [8 . 9999] 
E [100908 . 19999] 
P [20008 .. 29999] 
P [300908 .. 39999] 
P [40068 .. 49999] 
P [50008 .. 59999] 
P [60060 .. 69999] 
E [70008 .. 79999] 
E [50008 . 59999] 
k proto : Uint8ClampedArrayvy 
height: 158 
width: 158 
* proto : ImageData 
图 7-28 
Javascript 语法 : 


var imaData=Context get limageData(x y, widih herght) ; 


参数 值 如 表 7-18 所 示 。 


x 7-18 
2 JJ Box 
X 开始 复制 的 左上 角 位 置 的 x 坐标 
y 开始 复制 的 左上 角 位 置 的 y 坐标 
width 将 要 复制 的 矩形 区 域 的 宽度 
height 将 要 复制 的 矩形 区 域 的 高 度 


putImageData() 方法 : 
putImageData() 方法 将 图 像 数 据 ( 从 指定 的 ImageData 对 象 ) 放 回 画布 上 。 
JavaScript 语法 : 


= 


参数 值 如 表 7-19 所 示 。 


表 7-19 
2 JH 描 — XN 
imgData 规定 要 放 回 画布 的 ImageData 对 象 
X ImageData X ZA EAI x 坐标， 以 像素 计 
y ImageData 对 象 左上 角 的 y 坐 标 ， 以 像素 计 
dirtyX 可 选 。 水 平 值 (x)， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 
dirtyY 可 选 。 水 平 值 (y)， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 
dirtyWidth 可 选 。 在 画布 上 绘制 图 像 所 使 用 的 宽度 
dirtyHeight 可 选 。 在 画布 上 绘制 图 像 押 使 用 的 高 度 
代码 清单 : 像素 操作 。 
Secum B 
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EXE 
HTML5 画布 一 一 在 线 绘图 板 
window.onload=function () { 
var can-document.getElementById("can"); 
var Cobj—Can.getContext ("2d"); 
Cobe Degn Path), 
cobj.fillStyle="red"; 
Coby mu cU DUE ESQ Oe: 
COW a eae D. 
aie eroe Gat lmacewera (50. S0 15/0, 7.59) 5 天 由 站 用 50,50 esi ls0 mp 150 
图 片 内 容 返回 结果 为 一 个 对 象 
// 对 象 保 存 像 素 总 数量 = 对 象 的 宽度 * 对 象 的 高 度 
for(var iOi aa avidin aa height Ir) 
aa.data[4*1i]=10; 
db ap iL | = iS 5 
Mesa es Sg 
aa. darca | dbsoibae o] S255 4 


aa.data 
aa.data 


[ 
[ 
[ 
[ 


Goby). DUE ImMageData (aa, 200, 200) 
j 
Ser 


BRUNA 7-29 Bras. 
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所 谓 的 矩阵 转换 是 线性 代数 中 的 一 个 概念 。 在 线性 代数 中 ， 线 性 变换 能 够 用 矩阵 表示 。 


而 在 图 形 独 像 学 中 ， 和 矩阵 转换 一 般 是 用 来 表示 网 形 的 变换 ， 如 平移 、 旋 转 、 缩 放 和 笠 切 。 而 
这 些 变化 全 部 都 是 基于 怎 阵 变换 计算 而 出 的 。 但 是 矩阵 运算 比较 复杂 ，Canvas 已 经 把 相应 的 


ns | 


HTML5 

实战 宝典 
变换 封 疙 成 函数 ， 我 们 可 以 下 接 使 用 从 而 简化 了 我 们 的 工作 。Canvas 里 面 的 变换 包括 平移 、 
旋转 、 缩 放 如 表 7-20—3 7-25 所 示 。 


转换 
表 7-20 
H. 3 描 x 
scale() ACRI e AA EK) 
rotate() 旋转 当前 绘图 
translate() 重新 映射 画布 上 的 (0, 0) 位 置 
transform() TRU ELI] P Fe XB RE 
setTransform() 将 当前 转换 重 置 为 单位 矩阵 ， 然 后 运行 transform() 
缩放 
定义 和 用 法 : 


scale( 方 法 缩放 当前 绘 网 ， 更 大 或 更 小 。 
JavaScript 语法 如 下 : 


context. scalel(scalewidth,scaleheiaght); 


表 7-21 
2 数 描述 
scalewidth AM HZ A BRE (1=100%，0.5=50%，2=200%， 依 次 类 推 ) 
scaleheight 缩放 当前 绘图 的 局 度 (1=100%, 0.5=50%, 2=200%, (KARE) 
旋转 
定义 和 用 法 : 
rotate() 方 法 旋转 当前 的 绘图 。 
JavaScript 语法 如 下 : 
context.rotate (angle); 
表 7-22 
2 KB jh — X 
旋转 角度 ， 以 弧度 计 
angle 如 需 将 角度 转换 为 弧度 ， 请 使 用 degrees*Math.PI/180 公式 进行 计算 
举例 : 如 需 旋转 5 度 ， 可 规定 下 和 面 的 公式 : 5*Math.PI/180 
平移 
定义 和 用 法 


translate(0 方 法 重新 移动 绘 多 xx 轴 或 y 轴 位 置 。 
JavaScript 语法 如 下 : 
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矩阵 转换 
定义 和 用 法 : 


COMES Me, translate (x y); 


HTML5 画布 一 一 在 线 绘图 板 


A 1-23 

fii 述 
添加 到 水 平 坐标 〈“x) 上 的 值 
添加 到 垂直 坐标 〈y) 上 的 值 


国 布 上 的 每 个 对 象 都 拥有 一 个 当前 的 变换 窍 阵 。 
transform( 方 法 蔡 换 当前 的 变换 算 阵 。 它 以 下 面 描述 的 乍 阵 来 操作 当前 的 变换 乍 阵 : 


ac ebd f0 0 1 


transform( LIFA ee. PAHAR SH IAE o 


JavaScript 语法 如 下 : 


e 


f 


定义 和 用 法 : 


colbextettamsbormedcbucd ejt) 


dA 7-24 


fii 述 
水 平 缩放 绘图 
水 平 倾斜 绘图 
垂直 倾斜 绘图 
垂直 缩放 绘图 
水 平移 动 绘图 
重生 移动 绘图 


画布 上 的 每 个 对 象 都 拥有 -一 个 当前 的 变换 矩阵 。 
setTransform0) 方 法 把 当前 的 变换 矩阵 重 置 为 单位 矩阵 ， 然 后 以 相同 的 参数 运行 


transform()。 


绘制 一 个 和 矩形， 通过 setTransform() 重 置 并 创建 新 的 变换 宅 阵 ， 再 次 绘制 矩形 ， 重 置 并 


创建 新 的 变换 符 阵 ， 然 后 再 次 绘制 矩形 。 
JavaScript 语法 如 下 : 


Context- sepu umso Jm ducc E) g 
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实战 宝典 
x 7-25 
2 3* Hio xk 
à 水 平 旋转 绘图 
b 水 平 倾斜 绘图 
垂直 倾斜 绘图 
d 垂直 缩放 绘图 
水 平移 动 绘图 
f 垂直 移动 绘图 


7.8 绘图 板 实战 


要 和 奉 看 本 文 展示 的 示例 需要 一 个 浏览 万 并 能 访问 mternet。 所 有 示例 都 在 一 个 真实 网 站 


上 提供 《参见 参考 资料 画板 示例 )。 

本 小 方 主要 是 完成 一 个 绘图 板 ， 所 用 知识 主要 是 前 儿 小 市 的 知识 点 ， 利 用 Canvas API 
提供 的 属性 、 方 法 来 制作 一 个 绘图 板 。 

功能 介绍 : 

G) 文件 选项 :新建 画布 、 返 回 〈 撤 销 )、 保 存 〔 保 存 为 图 片 )、 绘 制 完 成 后 保存 下 载 到 
电脑 。 

(2) IAI: £x. Æ, Fel. 

(3) 方式 : 填充 、 男 线 。 

(4) 粗细 : 选择 线条 粗细 。 

(5) WE: WERE, AAE. 

(6) 橡皮 探 。 

a AL: AZo 

HTML: 


<'docryoe him- 

even lang lok > 

<head> 

<meta charset="UTF-8"> 

<title>iMiK</title> 

c epu PME quens Sains pS) Serco = 
«cpu hie a. Ss 

< SCrIOE STE Ws/exCaenvas is. a Serio 

«4 [endif ]|==> 
Se 

<link rel="stylesheet" href="CSS/Canvas.CSS"> 
</head> 

<body> 

<div class="map"> 


<éiv class=" menu" > 
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HTML5 画布 一 一 在 线 绘图 板 
<ul class- "file float" 
«li»XfF«/li» 
<u SO > 
< 
<1i>iklFl</1li> 
<1i> 保 存 </1i> 
«IL 
xU DLL: 
<ul esee draw 下 Ga 4 > 
<i SH ES aate [<sjoein ace yo" sec terere s] eo 1a = 
«elite «edis e sr | One 
«lu Gees solle WI mere See Toa 
«I5 le een obs 
uda olestie nis 
«UL 
Se EUMD 


«mde warns ido > 
人 

<div e€lass— son > 

<input type-"range" name-"points" min="1" max-"10" value="1" /> 
Sie 

UBL 


“Uitte lss eeoreaE > 

“li see cnloses |<seanmid—"ctyo Uta, span | os 
sss Som 
人 
cen 

“= Ee Colom eS cole ail) e dea 
Bee 

e oe 

<ul elass=" style float" > 

Tn a ene vao a a </ 1a 
«ul. eM. si SONO > 

<i Gieue er ole METTE USES mee aS 

“lida kr pss ler 

«uibus 

4 

<ul class="erase float"> 

«li data-role="clearRect ">i EE #t</1i> 

«udo 

«telis 

“Oanvas width="950" gemit dae S69 > 

VT RAS A WSO XE Canvas! 


XU Games 
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HTML5 
EE kes 


ge 
</beay- 
hml 


Javas rI pr: 

/* 

构造 函数 shape (cob, Cpllons) 

参数 cobj 为 2a 绘制 环境 

参数 options 填充 色 边框 色 线条 粗细 绘制 样式 绘制 方式 
P 

EUnet RES dp ecol e EOD | 


(Elo. 69g eo 


this.options = options || {1};// 没 有 传递 options 参数 EXAJJANIA 
"Ue (Gti s eqs os. TU / 22222360) 

I ee Ne el c eje en Er exea ees 018. D 4s 

Eats Color — Els, opr lons Soo loam a OE 

thro du = ee ee mela. 

Pics aa = ol onsec a Stroke: 


j 

j 

shape.prototype = { 

/ /绘制 线条 
| 
eS x = x MEE c 


pnto a m EE e 


chis xi = x1 || ire xis 
pins MEET a ile 
this.aa-(this.aa--'stroke')?this.aa:'stroke'; 


aS eo] musto = OT, 
plumseeolg estemos ens Sem 
tois Colo) Hib eret bio bed me — ED ce be 

this eo uem ath, 

Tmi exeo no le co elas, 2 
wigs Oolong. diari rete Ee El 
iplocs elegy) elakies aal (yy. 
thisveoon] eed os ct arin (je: 

talerett y lec lime 

by 

// 绘 制 矩 形 

eC RUNG © Moma, en yell a 
Eni 二 x || chis. zs 


ell 57 ce Ip eiae we 


ic debe codd ecce weg die Pilates de 
iussus 
this.aa-(thrs.aa--'stroke'||thzs.aa--'fill')?this.aa:'stroke'; 
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EMS. coperti tte =A Sonel or 

this. cob. Strokes yle = Enis seo lor, 

wines. CObg Inen bhi A e slew 

minns exe logo enim SEN Ns 

Eme CODI et OD ein bite 7) roe mete Mis le i 7 lone 
jum ce 

Coler exe) or) ass eee e 

tois eco. Closer an 

Gites «sty ee 

by 

// 绘 制 圆 形 

本 人 | 

ilc = EE S 

chs xi = x1 Seis a 

hee > 

ple ey = | a sale 

Karea = eet ala 

this.aa-(this.aa--'stroke'||this.aa--'fill')?this.aa:'stroke'; 

itasse = 22 |) Se c Meuse JE 

var erdum Mose seus ES zhe SI else ce a. 


elc dL Selgin MENU eH Sor ce qi sd e t 


this 


Tells 
felonies 
eles: 
phis 
ERES 
pince 
EOIS, 


by 


ole lo gi aree e eo hora, 

Cobi otrokeotyle — vents. “colon, 

Cobe Taeniidae = aae. 

eoque ueni iud Ns 

Co ucc bmc c Sl c Mid cl a. 
Goby [ems aa) 

CObg eC los ere INS 


style = “arc”; 


clearkect: EEC 


TALS 
TALS 


Cao: 
EELE 
(ele = 
je lela ste 


} 
} 


.SW = 20; 
xl S= kl | cnis xis 
SIN 2 
= wl 8 


Ce 由 ER 


style = "clearRect"; 


imac Lei) cheesy ('Ocbab eise Oleg, oe 7. GEO S | 


var type = i pe I Ime. 
Canvas.onmousedown = function (ev) { 
var lx = ev.layerX; 


var ly = ev.layerY; 
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var flag=false; 

var shapes = new shape(cobj, options); 
document debe n 
Canvas.onmousemove = function (ev) { 
var cx = ev.layerX||0; 

var cy = ev.layerY||0; 

if (type=="clearRect") { 

flag=true; 

shapes = new shape(cobj, options) ; 
shapes [type] (cx,cy); 

flag&&arr.push (shapes); 

Jjelse( 

document. tc ke—2 - 


Cob]. clearkect (0 07. Canvas. warn, “Canvas heahnt 


flag=true; 
[onec MU EE een cog iE 
arria erent sae valved 


} 

Shapes Eye M 
} 

j 

document -onmouseup — function e 
Canvas. onmousemove = null; 
ee oea e nae 
document.onmouseup = null; 

} 

} 

} 


var arr = e 

Ss (function()1 

var Canvas = document.getElementsByTagName ("Canvas") [0]; 
var cob) — "Canvas. eol = d 

Var ODELONS—4) > 

eut ccuesverce li!) eodeni e tine tiem P d 
options.aa-$(this).attr("data-role"); 

draw (Gain yas COb jo (th Peat i Gabel itolkey opio 
jj 

(Tt oa owe (FUNCION) 

var indes- s (ie lose) Index ense o 

Suc som") Se sc neue E 

(sola) (le Vela egedie le oes 

S (chs ee esc pcm ouncit 0S6 

,uneeclion() 1 

EESC ED Rro Unde Ys) E 
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HTMLS 画布 一 一 在 线 绘图 板 
}) 


Si menu \ehover (fue oor) re Omne 
SM ceo (ee 
I) 


// 男 图 

BC draw -son li”) Click(funcetion()1 

draw (Camvas, CObg, (this) oben (data rolce"), options), 
epe yat o (ela) ESSERE 

}) 


/ /线条 粗细 
Sr anto son i (el ek ee om 


$ (vl1inew") .HTML(S (tais) val ()) s 
options.lw=$ (this) .val(); 
)) 


/ / ERES, 


S(" Color ,Som Li Liajome”) .cliance (de baie exa. () Y 


LE ($ (this) .attre(vaata=mrole")=="8etroke") 4 
options- sC Color- (Chis) -vall),; 

Jjelse( 

options. fcolor=> (Chis). val); 

| 
Se 
}) 


/ /绘制 的 方式 
| 
options.aa=$ (this) .attr("data-role") ; 
S(T er 5 aM (ee Ee/( 

}) 


// 新 建 

SON eS croak) cc (me ee 

var lindex=$(". rile ,son 11") .1index (this); 
if (index==0) { 


Coby. lear kec t (0 0 md scc e vicis Beraat), 
arco ler 

else if (index==1) { 

cob- clearRkec i (0 0 Canvass waden, anvas Neigh, 
arr.pop(); 

[son Mec M Eme simil: Ce iso Men MET 


aor aid) Ez ead an el 
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else if (index==2) { 

var data=Canvas.toDataURL ("image/png") ; 
location.href-data.replace("image/png","image/octet-stream"); 
j 

}) 

ij 


效果 如 图 7-30 所 示 。 


画图 [ES] HB [3px] e GE] eat ceu 


图 7-30 
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8.1 HTML5 对 多 媒体 的 支持 
8.2” 首 频 和 视频 标签 

8.3 ” 首 频 和 人 视频 API 

8.4 aK 


8.1 HTML5 对 多 媒体 的 支持 


在 Web 中 不 仅 有 文本 、 图 斤 文 件 ， 还 有 视频 、 音 频 等 多 媒体 文件 。 在 HIMLS 友 布 之 
前 ， 播 放 音 频 、 视 频 需 要 借助 诸如 Flash Player 等 第 三 方 搬 件 来 解决 这 个 问题 。 现 在 使 用 
HTMLS 在 网 页 中 添加 视频 、 首 频 如 同 引 用 图 片 一 样 的 简单 、 方 便 。 

本 节 主 要 问讯 者 介绍 Video TAK Audio 元 素 ， 以 及 它们 所 文 持 的 不 同 的 视频 、 音 频 类 型 。 


8.1.1 Video 支持 视频 格式 


1. 视频 编码 和 解码 

所 谓 视 频 编 码 方式 是 指 通过 特定 的 压缩 技术 ， 将 某 个 视频 格 陈 文件 转换 成 另 一 种 视频 格 
起 文件 的 方式 。 

视频 解码 是 指 用 特定 方法 把 已 经 编码 的 视频 还 原 成 它 原 有 的 格式 ， 进 行 播放 。 

2. 编码 说 明 

Theora 视频 编码 是 开放 而 且 免 费 的 视频 压缩 编码 技 术 ， 由 Xiph 基金 会 有 发布。 做 为 该 基 
EA Ogg 项 目的 一 部 分 ， 从 VP3 HD 高 清 到 MPEG-4/DivX 格式 都 能 够 被 Theora 很 好 地 文 
持 。 使 用 Theora Ft iia FE fif Az A VF AY 9* ,. Firefox 和 Opera 将 通过 新 的 HIMLS 元 素 提 供 对 
Ogg/Theora 视频 的 原生 文 持 。 

H.264 视频 编码 是 在 MPEG-4 技术 的 基础 之 上 建立 起 来 的 ，H.264 与 以 前 的 国际 标准 如 
H.263 和 MPEG-4 相 比 ， 为 达到 高 效 的 压缩 ， 充 分 利用 了 各 种 元 余 ， 统 计 元 余 和 视觉 生理 元 
Ro WEIGH (Blu-ray) 束 采 用 这 种 格式 。 

当前 ，Video 元 素 支 持 三 种 视频 格式 如 表 8-1 所 示 。 主 流 浏 览 器 对 这 三 种 格式 的 支持 情 
况 如 图 8-1 所 示 。 


X 8-1 
说 明 
Ogg 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 
MPEG4 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 
WebM 带 有 VPS 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 
浏览 器 MP4 WebM Ogg 


Internet Explorer9+ YES | NO NO 
Chrome 6+ YES | YES | YES 
Firefox 4+ NO. | VES. | YES 
Safari 4+ YES | NO NO 


Opera 11.5+ NO | YES | YES 
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8.1.2 Audio x: EE TS 


当前 ，Audio 元 素 支持 三 种 音频 格式 : MP3，Wav， 和 Ogg 如 图 8-2 所 示 。 


浏览 器 MP3 Wav Ogg 


Internet Explorer 9+ YES NO NO 


Chrome 8+ YES | YES | YES 


Firefox 4+ TES YES YES 


Safari 4+ YES | YES |. NO 


Opera 15+ YES YES YES 


8-2 


8.1[3 Audio/Video 浏览 器 支持 情况 
Audio 75628 3| T3, gs xc Jr Tei DU AH E] 8-3 所 示 。 


$ ® 0 € e 


Internet Explorer 9+ | Firefox 4+ | Opera 11.5+ Chrome 6+ | Safari 4+ 


8-3 
Video JUD tas oc dr IH DUAE] 8-4 所 示 。 


S € O © e 


Internet Explorer 9+ Firefox 4+ Opera 11.5+ Chrome 6+ Safari 4+ 


图 8-4 


EL NAD LAUS SE 


HTMLS 让 我 们 可 以 如 同 引入 图 片 一 样 简单 地 使 用 音频 、 视 频 。 
8.2.1 Audio 元 素 


HTMLS 规定 了 一 种 通过 Audio 元 和 素来 包含 音频 的 标准 方法 。Audio 元 素 能 够 播放 声音 
文件 或 者 音频 流 。 
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he ee 0 AuUQUO NMOS. —CONELOls— Controls =< alco 


QER 

可 以 在 开始 标签 和 结束 标签 之 间 放 置 文本 内 容 ， 这 样 旧 的 浏览 器 就 可 以 显示 出 不 支持 该 
标签 的 信息 。 

浏览 器 全 文 持 

在 上 节 中 ， 我 们 说 过 浏览 右 对 于 音频 格式 的 文 持 情 况 ， 要 让 所 有 浏览 右 都 可 以 播放 音频 
文件 ， 我 们 需要 给 audio 引用 全 少 2 个 指定 格式 的 音频 文件 。 我 们 可 以 通过 <source> 链 接 不 
同 的 音频 文件 ， 这 样 我 们 可 以 做 到 只 要 它 文 持 <audio> 标 签 ， 浏 览 右 将 使 用 第 一 个 可 识别 的 
格式 。 


«ieugploBLo: oonereols os 

«source src="audio.ogg" type-"audio/ogg"» 
«source src-"audio.mp3" type-"audio/mpeg"» 
您 的 浏览 器 不 支持 audio， 请 升级 浏览 器 。 

</audio> 


«audio» 标签 的 属性 如 表 8-2 Bran 


表 8-2 
— 标签 添加 上 此 属性 ， 音 频 在 就 绪 后 马上 播放 
—: 标签 添加 上 此 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按 负 
Tm 标签 添加 上 此 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 


preload 标签 添加 上 此 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 
如 果 使 用 "autoplay"， 则 忽略 该 属性 
src url 添加 要 播放 的 音频 的 URL 


8.2.2 Video 元素 


HTMLS 规定 了 一 种 通过 Video 元 素来 包含 视频 的 标准 方法 。 
页 面 讨 加 视频 : 


svideo Sre t mesecsmpod'exo m Todi eonim os 
您 的 浏览 器 不 支持 video， 请 升级 浏览 器 。< /video> 


CD 提示 

可 以 在 开始 标签 和 结束 标签 之 间 放置 文本 内 容 ， 这 样 旧 的 浏览 器 就 可 以 显示 出 不 支持 该 
标签 的 信息 。 

在 上 下 中 ， 我 们 说 过 浏览 右 对 于 视频 格式 的 文 持 情况 ， 要 让 所 有 浏览 右 都 可 以 播放 视频 
文件 ， 我 们 需要 给 Video 引用 至 少 2 个 指定 格式 的 视频 文件 。 我 们 可 以 通过 <source> 链 接 不 
辣 的 视频 文件 ， 这 样 我 们 可 以 做 到 只 要 它 文 持 <video> 标 签 ， 浏 贤 磊 将 使 用 第 一 个 可 识别 的 
格式 。 
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% RUN A EXER 
<video Controls = conia ede 
<scurce src-'move.ogg'»«/scurce» 
<scurce src-'move.mp4'»«/scurce» 


LRN VBS AN EF Video, /eo 


«video» 标签 的 属性 如 表 8-3 所 示 。 


x 8-3 
Od 标签 添加 上 此 属性 ， 则 视频 在 就 绪 后 马上 播放 
标签 添加 上 此 属性 ， 则 向 用 户 显 示 控 件 ， 比 如 播放 按钮 ， 声 音 等 


width pixels 设置 视频 播放 器 的 宽度 


src url 要 播放 的 视频 的 URL 

ica 标签 添加 上 此 属性 ， 则 当 媒 介 文件 完成 播放 后 再 次 开始 播放 
本 pm FE. LICE, WCE LE, OPS 
P P 如 果 使 用 "autoplay"， 则 忽略 该 属性 
height 设置 视频 播放 器 的 高 度 


8.3” 首 频 和 视频 API 


vU HH 


8.3.1 HTML s^ Video 在 各 大 浏览 器 呈现 


作为 开发 人 员 ， 我 们 使 用 视频 播放 器 时 一 定 希 望 它 的 外 观 在 各 个 浏览 右 中 看 起 来 一 致 ， 
但 是 在 下 图 中 可 以 看 到 目前 各 个 浏览 右 提 供 的 视频 控制 工具 条 外 观 是 各 不 相同 的 ， 如 图 8-5. 
图 8-6 和 图 8-7 所 示 : 

IE ixl as: 


KINA gy (Firefox): 


谷歌 浏览 器 (Chrome): 


> © EE DE Ø 


图 8-7 


我 们 需要 给 用 户 提供 更 好 的 用 户 体验 ， 所 以 布 望 它 的 外 观 在 各 个 浏览 圳 中 看 起 来 一 致 。 
在 后 面 的 小 节 中 ， 我 们 将 告诉 大 家 如 何 让 Video 控制 工具 在 各 大 浏览 器 保持 一 致 。 
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E 
8.3.2 ”音频 和 视频 API 介绍 


下 面 ， 我 们 需要 从 头 来 创建 这 个 控制 工具 条 ， 利 用 HIML 和 CSS 再 加 上 一 些 图 厂 实 现 
起 来 并 不 难 ， 另 外 通过 HTIML5S 多 媒体 元 素 提 供 的 API 可 以 很 方便 地 将 创建 的 任何 按钮 与 播 
放 / 和 暂停 等 事件 进行 绑 定 。 

HTML5 DOM 为 <audio> 和 <video> 元 素 提 供 了 方法 、 属 性 和 事件 。 

这 些 方法 、 属 性 和 事件 允许 您 使 用 Javascript 来 操作 <audio> 和 <video> 元 系 。 

HTMLS Audio/Video 方 法 如 表 8-4 所 示 。 


表 8-4 
A. 3 fü — XX 
addTextTrack() 问 首 频 /视频 添加 独 的 文本 轨道 
canPlayType() 检测 浏览 器 是 否 能 播放 指定 的 首 频 /视频 类 型 
load() 重新 加 载 音 频 / 视 频 元 素 
play() 开始 播放 音频 /视频 
pause() 暂停 当前 播放 的 首 频 /视频 


HTMLS Audio/Video 属性 如 表 8-5 所 示 。 


表 8-5 
属 性 JH — X 
audioTracks 返回 表示 可 用 音 轨 的 AudioTrackList 对 象 
autoplay 设置 或 返回 是 否 在 加 载 完 成 后 随即 播放 音频 /视频 
buffered 返回 表示 音频 /视频 已 缓冲 部 分 的 TimeRanges 对 象 
controller 返回 表示 音频 /视频 当前 媒体 控制 器 的 MediaController 对 象 
controls 设置 或 返回 音频 /视频 是 否 显 示 控 件 〈《 比 如 播放 /和 暂停 等 ) 
crossOrigin 设置 或 返回 音频 /视频 的 CORS 设置 
currentSrc 返回 当前 音频 /视频 的 URL 
currentTime 设置 或 返回 音频 /视频 中 的 当前 播放 位 置 ( 以 秒 计 ) 
defaultMuted 设置 或 返回 音频 /视频 默认 是 否 静 音 
defaultPlaybackRate 设置 或 返回 音频 /视频 的 默认 播放 速度 
duration 返回 当前 音频 /视频 的 长 度 〈 以 秒 计 ) 
ended 返回 音频 /视频 的 播放 是 合 已 结束 
error 返回 表示 音频 /视频 错误 状态 的 MediaError 对 象 
loop 设置 或 返回 音频 /视频 是 人 否 应 在 结束 时 重新 播放 
mediaGroup 设置 或 返回 音频 /视频 所 属 的 组 合 〈 用 于 连接 多 个 音频 /视频 元 素 ) 
muted 设置 或 返回 音频 /视频 是 否 静 音 


返回 音频 /视频 的 当前 网 络 状态 


ii 


networkState 
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ls TE 
paused 
playbackRate 
played 
preload 
readyState 
seekable 
seeking 
SIC 
startDate 
textTracks 
videoTracks 


volume 


jü 述 


设置 或 返回 音频 /视频 是 否 暂 停 

设置 或 返回 音频 /视频 播放 的 速度 
返回 表示 音频 /视频 已 播放 部 分 的 TimeRanges 对 象 
置 或 返回 音频 /视频 是 否 应 该 在 页 面 加 载 后 进行 加 载 
返回 音频 /视频 当前 的 就 绪 状 态 

回 表 示 音 频 /视频 可 寻 址 部 分 的 TimeRanges 对 象 
返回 用 户 是 否 正 在 音频 /视频 中 进行 查找 

设置 或 返回 音频 /视频 元 素 的 当前 来 源 

返回 表示 当前 时 间 偏 移 的 Date XJ 25 

返回 表示 可 用 文本 轨道 的 TextTrackList 对 象 

返回 表示 可 用 视频 轨道 的 VideoTrackList 对 象 


设置 或 返回 音频 /视频 的 音量 


KR 


i 


y 


ii 


[s 


HTMLS Audio/Video 事件 如 表 8-6 所 示 。 


事 dm 
abort 
canplay 
canplaythrough 
durationchange 
emptIEd 
ended 
error 
loadeddata 
loadedmetadata 
loadstart 
pause 
play 
playing 
progress 
ratechange 
seeked 


seeking 


X 8-6 


当 音 频 /视频 的 加 载 已 放弃 时 

当 浏 览 器 可 以 播放 音频 /视频 时 

当 浏 览 器 可 在 不 因 绥 冲 而 停顿 的 情况 下 进行 播放 时 
当 音 频 /视频 的 时 长 已 更 改 时 

当 目 前 的 播放 列表 为 空 时 

当 目 前 的 播放 列表 已 结束 时 

当 在 音频 /视频 加 载 期 间 发 生 错误 时 

当 浏 览 器 已 加 载 音频 /视频 的 当前 帧 时 

当 浏 览 器 已 加 载 音 频 /视频 的 元 数据 时 

当 浏 览 器 开始 查找 音频 /视频 时 

当 首 频 /视频 已 暂停 时 

当 音 频 /视频 已 开始 或 不 再 暂停 时 

当 音 频 /视频 在 已 因 绥 冲 而 暂停 或 停止 后 已 就 绪 时 
当 浏 览 器 正在 下 载 首 频 /视频 时 

当 音 频 /视频 的 播放 速度 已 更 改 时 

当 用 户 已 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 
当 用 户 开 始 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 


5 tik A LEME 


CE) 
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实战 宝典 
(BE) 

属 性 描 x 

stalled "ADU dS RL MUS. [HAS AS FY A IY 

suspend 当 浏 览 器 刻意 不 获取 媒体 数据 时 

timeupdate 当 目 前 的 播放 位 置 已 更 改 时 
volumechange 当 音 量 已 更 改 时 

waiting 当 视 频 由 于 需要 绥 冲 下 一 帧 而 集 止 


8.4 ”播放 器 实战 


由 于 各 大 浏览 费 在 对 HTML5 na ele 革 开 ， 因 此 为 了 有 更 好 的 兼容 性 ， 般 
要 进行 定制 开发 ， 这 样 才 能 若 顾 各 类 的 浏览 

结合 本 革 前 三 市 的 知识 ， 下 面 我 们 利用 HH HTMLS Z WARRI HEU] API nf SKI H XE 
SUUS TBR BAR S MSS UIT P 

HTMLS: 


<1 DOCTYPE ntml> 

«html lang="en"> 

<head> 

<meta charset-"UTF-8"» 
<title>Video</title> 

<link rel="stylesheet" href="CSS/video.CSS"> 
<ec I e sre 75, nUPiseceenenSe =. serie 
SC I Ee VI deos esc gp 
</head> 

<body- 

<div class="videos"> 

«video src="trailer.mp4 ">i Ay Wl pias xd Video, WIA MI Has. </video> 
<!-- Video 控制 控件 开始 -=-> 

<div es 
ee 
<divwelass—' Progress > 

<div class="load-progress"></div> 

<div class="now-progress"></div> 

<j Clue 

we 

<div class="time"> 

<span class='now'>00:00</span> 

Gee |G > 

<span class='dur'>00:00</span> 

< le 

«div class="volume"> 


<span Class—'vollcon “eonfont’ > </span> 


132 


% RUN A EXER 
<div Glass—'volbox’> 
<div class— vVobinner’ ></ diy > 
xU alice 
</div> 
<div class="fullscreen iconfont"> </div> 
< an 
OU 
<!-- Video 控制 控件 开始 --> 
二 
ii 
<<) Gale 
pod 
<<) lane = 


JavaScript: 


window. onload=function() { 
// 获 取 视频 对 象 
var vObj-document.getElementsByClassName('videos')[0].getElementsByTag 


Name ('video') [0]; 
vObj .controls=false; // ay Brett 
//3kW play 按钮 
var playbtn-document.getElementsByClassName('play') [0]; 


// 获 取 加 载 图 标 


var load=document.getElementsByClassName('loading"') [0]; 

// 获 取 进度 条 

var progress-document.getElementsByClassName ("progress") [0]; 

var nowProgress-document.getElementsByClassName ("now-progress") [0]; 
var loadProgress=document.getKlementsByClassName('load-progress') [0]; 


PROGEeS>S onmouseover Tuomiom( 4 
progress.style.height='8px'; 
OuOOR ess Eee 9» t 

} 
progress.onmouseout-function() | 
progress.style.height='5px'; 
Progress. style. Lop—'-=5opx > 

} 

// aii s 单 击 播放 按钮 开始 播放 暂 集 
ORGOnei en 和 ET 
in ,Obm paused) | 

vob play O, 

}else{ 

vObj.pause(); 

} 

} 

/ /检测 播 放 暂停 

WO ne () 
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/ /更改 播放 按钮 样式 播放 状态 
playotene InmnerHiM "> 
/ /视频 缓冲 
VODIJ- -Onprogress—Lunction (){ 
eon ole log etsium edem 
var scale-vObj.buffered.end(0)/vObj.duration; 
loadProgress.style.width-scale*100-'$'; 
VOI- Ona en Fre om 


load.style.display='block'; 


vVOb] -onplaying=runceion( ) { 
load.style.display='none'; 
vObq suopte ues 


// 暂 俘 事 件 触 发 更 改 播放 按钮 样式 暂停 状态 

VODI Onause Fun eon) 

playbtn.innerHTML=' '; 

} 

0 time Zi 

var nowT-document.getElementsByClassName ('now') [0]; //?A BU BN JR]ERS 
var dur-document.getElementsByClassName('dur') [0]; //##2NI AS 


vObj .onloadedmetadata=function() { 

hunc qs HSBIMIE S Ssmo Io duration), 

// console.log(vObj.buffered.end(0)); 

var scale-vObj.buffered.end(0)/vObj.duration; 
loadProgress.style.width=scale*100+'S'; 

| 

// 播 放 时 间 改 变 “” 修改 当前 播放 时 间 修改 进度 条 
vObj.ontimeupdate-function()í 

now. innerkIM =setTime(vObJ].Currentlime); 
var scale-vObj.currentTime/vObj.duration; 
nowProgress.style.width=scale*100+'S'; 


} 


// 单 击 进度 条 ” 跳 转 到 指定 时 间 
progress.onclick=function (e) { 

var ev=window.event | |e; 

var x-ev.offsetX|lev.layerX; 

var progressW-progress.offsetWidth; 
vObj.currentTime-x/progressW*vObj.duration; 
} 

progress.onmousedown=function (e) { 


Var ev=window.event| |e; 
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% RUNS — — = XE Sk BET E 
var x-ev.offsetX|lev.layerX; 
var progressW-progress.offsetWidth;; 
document.onmousemove-function (e) { 
var ev=window.event| |e; 
if (ev.preventDefault ) 
ev.preventDefault(); // 阻 止 默认 浏览 器 动作 (W3C) 
else 
ev.returnValue = false;//IE PIERRE 
var x-ev.offsetX|lev.layerX; 
nowProgress.style.width-x/progressW*100-s'2'; 
vObj.currentTime-x/progressW*vObj.duration; 
} 
document onmouseue=itunect Tom(yl 
document.onmousemove-null; 
document.onmouseup-null; 
} 
| 
/ /设置 时 间 格 式 
function setTime (time) { 
Wee Ite Se ee RN beside EN iei a )) 5 
var uec reuse Marner loot (time 45000) C0 


var s=setZero (Math. floor (timeso60) ) >; 


if (h<=0) { 
return mt': es, 
}else{ 


return lnt” tai tS 
| 

} 

// 时 间 <=9 4E 
function setZero (num) { 
if (num<=9) { 

Pe TOTAU, 
telse{ 

return ""+numy 

} 

} 


/ /播放 器 EPEE 

var fullBtn=document .getElementsByClassName('fullscreen') [0]; 
var outBox=document.getKElementsByClassName ('videos"') [0]; 
//fullscreen.js 中 的 函数 全 屏 事件 

tullisecreenchange(runcrvon n) 

if(!fullstate()){ 

/ NEREDE 

CULB 5 se y le m een s 

outBox.style.height=''; 
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| HETETS 


fullBtn.innerHTML-' '; 
Jjelse( 
/ / BF 
fullBtn.innerHTML-' '; 


outBox.style.width-document.documentElement.clIEntWidth-*'px'; 
outBox.style.height=window.screen.height+'px'; 
} 

j); 

// 单 击 全 屏 投 钮 全 屏 退出 全 屏 

FOULLIBEn onclick- funcion) 
if(!fullstate())(//fullscreen.js BEGIN 
fullscreen (outBox);//4tBf 

}else{ 

exittullscreen() ET 

} 

} 

/ / REAS 音量 


var volicon-document.getElementsByClassName('volicon')[0]; 
var volbox=document.getHElementsByClassName('volbox') [0]; 
var volinner-document.getElementsByClassName('volinner')[0]; 


var nowVol=1; 
/ /获取 单 击 位 置 


yolbox. One LLek-EUMer lem SS A 


var ev=window.event | |e; 

var x-ev.offsetX|lev.layerX; 
voObysvolume-x/wvolboxsoftsetwWidbths 
| 

// 单 击 音量 按钮 静音 还 原 

pedore me oe diee es ne lon) 

Tt (vob volume 0)! 
nowVol-vObj.volume; 
vObj.volume-20; 

Jjelse( 

vObj.volume-nowVol; 

} 

} 

// 监 测 音量 变化 
vObj.onvolumechange-function()í 
// 计 算 首 量 进度 条 
volinner.style.width=vO0Obj.volume*100+'S'; 
// 根 据 音 量 值 动态 改变 音量 图 标 

if (vObj .volume==0) { 


VOLLEN- iblahatsce 2I S i. 
telse 1f (vObDJ]. volume- 0. 5) 
VOLLEN e LINimernMs! Tes 


telse if(vObj.volume«0.5&&vObj.volume!-0)[( 
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% RUN A EXER 
VO LG Ome inner TMS; 
} 
j 
// Xi ANE XCE 
noTexrt (Volicon) s 
noText (playbtn); 
TUNC Xo more: Coo) 
oDi- onseleclotart funci tone) | 
var ev=window.event| |e; 
if (ev.preventDefault ) 
ev.preventDefault(); 
else 


ev.returnValue - false; 


— 0 


Jg EUR AU] 8-8 所 示 。 
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移动 端 触 撞 事 件 


9.1 移动 端 事件 模型 


9.1.1 我 们 熟知 的 事件 模型 


1996 Œ, Netscape (Px) 公司 引入 了 鼠标 事件 和 车 名 的 鼠标 巧 停 事 件 ， 使 得 Web JT 
者 能 够 在 PC 闯 开 发 出 可 交互 的 网 站 。 随 后 义 引 入 了 键盘 事件 ， 能 够 让 我 们 在 网 页 中 监控 到 
用 户 的 输入 动作 。 这 两 种 事件 在 PC 站 统治 了 长 达 15 年 ， 直 到 ioOS 系统 的 出 现 ， 它 既 没 有 很 
标 也 没有 键盘 ， 所 以 在 为 移动 Safari 浏览 右 开 发 交互 网 页 时 ， 第 规 的 鼠标 和 键盘 事件 根本 无 
法 使 用 ， 于 是 有 了 第 三 种 事件 一 MÀBBfR. BÉ Android 中 的 WebKit 的 加 入 ， 很 多 这 样 的 
所 有 事件 已 变 成 了 事实 标准 。 


9.1.2 ”触摸 事件 有 何不 同 
触摸 事件 乍 一 看 好 像 和 鼠标 事件 没什么 不 同 。 我 们 想当然 地 认为 mousedown 等 于 


touchstart, mousemove 等 于 touchmove，moveseup 等 于 touchup。 那 么 如 下 代码 的 运行 结果 和 
您 想 得 是 否 一 致 呢 ? 


function touchEvent (event) { 
Switch (event. Cypel) 4 

Cases EOvuehstack = 
comsole log ("touchstart™) p 
break; 

case "touchend": 
console, logit touchend™); 
break; 

case "touchmove": 
console. log(“touchmove™) s 


break; 


} 
function mouseEvent (event) 
switch event tpe 
case "mousedown": 
console.log("mousedown"); 
break; 
case "mousemove": 
console.log("mousemove"); 
break; 
case "mouseup": 
console.log("mouseup"); 


break; 
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clocumenmbeacidbwemnehsspemner(t':osucusctdrP' o oucLhBhwemnt false); 


documenrt.addEwventhrssrener("rtouchend'"* "touchbvent. false)s 


cCocument vaddhventhtsrener (“rouchmove |) toucnivent, false): 


( 
( 
( 
document.addEventListener("mousedown", mouseEvent, false); 
document .addeEventListener (mouseup, mousekvent, false); 

( 


document .addEventListener 


触摸 事件 运行 的 结 朱 为 : 
在 Chrome 的 控制 台中 切换 到 device PSL, WAT LRU AEF, ONES 9-1 所 示 。 


"mousemove", mouseEvent, false); 


[x à i Elements Console Sources Network 
© Ww top v Preserve log 
touchstart 
touchmove 
touchend 
» 
图 9-1 


PARE EIS TR, Un 9-2 所 示 。 


[x à | Elements Console Sources Network 


i Y top v Preserve log 


injectScript startLiveReload init 


mousemove 

mousedown 
mousemove 

mouseup 


图 9-2 


我 们 已 经 看 到 两 种 事件 输出 了 不 同 的 结果 ， 那 么 我 们 可 以 通过 这 些 结果 得 到 什么 结论 呢 ? 

(1) 触摸 事件 是 不 连续 的 ， 而 鼠标 事件 是 连续 的 。 所 以 当 我 们 触发 触摸 的 事件 的 时 候 ， 
只 有 当 用 户 真 正 触 摸 到 屏幕 ， 移 动 ， 直 到 用 户 的 手指 离开 屏幕 ， 才 会 依次 触发 touchstart- 
touchmove-touchend。 而 当 用 户 将 鼠标 指针 从 元 素 A BaP CR B 时 ， 展 标 移 动 是 连续 的 还 
意味 独 你 可 以 通过 脚本 进行 监控 。 所 以 知道 当 我 的 鼠标 移入 窗口 总 是 先 触 发 mousemove， 当 
我 鼠标 按 下 并 且 和 移动， 最 终 抬 起 的 时 候 ， 才 会 依次 触发 mousedown-mousemove-mouseup. fh 
摸 操 作 束 不 同 了 ， 用 户 可 以 放 开 元 素 A， 抬 起 手下 接 去 倍 元 素 B。 

(2) 事件 的 动作 序列 不 同 。 很 显然 ， 触 措 动 作 序列 是 touchstart-touchmove-touchend， 而 
鼠标 序列 则 是 mousemove-mousedown-mouseup。 这 个 区 别 很 重要 ， 如 果 一 个 元 素 同时 添加 这 
三 个 事件 ， 那 么 在 移动 端 总 是 touchstart EAR, TE PC 9m ise mousemove 先 触 发 。 

(3) 事件 反映 的 意图 不 同 。 当 鼠标 指针 移入 某 个 元 素 ， 或 者 用 户 投下 某 个 鼠标 按键 时 ， 
系统 可 以 立即 判断 出 应 该 触发 哪个 事件 。 而 对 于 触摸 操作 来 说 就 不 同 了 ， 人 触摸 操作 可 以 引出 
不 同 的 动作 : 在 你 的 手指 触 碰 屏幕 的 瞬间 ， 系 统 还 无 法 判断 出 你 的 意图 。 所 以 在 这 个 方面 来 
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说 ， 触 挽 事 件 更 复兴 。 

(4) 事实 上 还 有 一 点 不 同 ， 虽 然 通 过 以 上 案例 很 难看 出 ， 但 通过 我 们 的 经 验 能 够 总 结 出 
来 。 鼠 标 指针 总 是 指 关 某 一 个 像素 ， 而 手指 触摸 会 窗 诲 很 多 像素 点 。 通 常 ， 系 统 会 从 这 些 像 
素 点 计算 出 一 个 中 心 点 作为 触摸 事件 的 坐标 ， 并 且 在 touchstart 和 touchend 之 间 给 手指 移动 
留 有 余地 《人 否则 的 话 总 是 会 触发 touchmove)。 


9.1.3 触摸 事件 的 发 展 趋势 


随 看 智能 手机 平台 的 发 展 ， 移 动 应 用 越 来 越 丰 富 ， 用 户 体 验 要 求 也 越 来 越 蜗 。 移 动 平台 
捕获 用 户 的 消息 主要 分 为 按键 、 触 摸 屏 和 轨迹 球 三 种 类 型 。 现 阶段 ， 触 摸 啊 应 是 主流 趋势 ， 
对 于 触摸 事件 未 来 的 发 展 方向 是 值得 我 们 期 符 和 探索 的 。 

CIO 触摸 事件 因为 手指 直接 和 设备 接触 所 以 比 鼠 标 事 件 携 种 更 多 的 信息 。 触 摸 屏 可 以 探 
测 用 户 手 指 的 温度 ， 检 测 触摸 域 的 半径 或 者 四 触摸 的 压力 值 ， 这 些 属 性 的 实现 能 让 我 们 做 更 
多 的 事情 。 在 IE 的 指针 事件 中 ， 己 经 预 留 了 一 些 对 应 的 属性 。 

(2) 触 挽 事件 和 局 标 事件 的 合并 。 从 操作 逻辑 上 来 说 ， 这 两 种 事件 几乎 一 发。 微软 提供 
了 指针 事件 来 兼容 这 两 个 事件 ，pointerdown-pointermove-pointerup， 然 后 通过 事件 对 象 来 判 
Wiehe Sid eta eT F. Mozilla 和 Google 正在 考 外 实现 指针 事件 (PointerEvent)。 所 
以 未 来 情况 可 能 还 会 发 生变 化 。 

(3) 我 们 以 上 讨论 的 触 换 事件 仪 限于 单 指 触 换 ， 当 前 多 指 触 控 在 浏览 项 文 持 得 并 不 是 太 
ke. (Az, Safari 浏览 器 在 iOS 上 还 实现 了 gesturestart, gesturechange 和 gestureend 事件 ，IE 
浏览 器 也 有 一 组 类 似 的 事件 。 如 果 多 指 触 控 能 实现 的 更 好 ， 那 么 HTMLS RERE IV EFF Ai 
更 多 的 交互 和 操作 人 逻辑 。 


9.2 移动 端 事件 详解 


HTMLS 中 新 添加 了 很 多 交互 事件 ， 包 括 上 一 节 中 提 到 的 触摸 、 手 势 、 指 针 事 件 等 ， 但 
是 由 于 其 兼容 问题 不 是 很 理想 ， 应 用 实战 性 不 是 太 强 ， 所 以 本 书 只 分 享 应 用 广泛 、 莱 容 性 好 
的 事件 ， 主 要 讨论 的 触摸 事件 包括 : touchstart、touchmove、touchend 以 及 touchcancel。 


9.2.1 事件 


上 一 节 中 ， 我 们 已 经 用 到 了 以 下 的 一 些 事件 ， 现 在 来 进行 深入 的 了 解 。 

touchstart 事件 : 当 手 指 触 摸 屏 幕 时 候 触 发 ， 即 使 已 经 有 一 个 手指 放 在 屏幕 上 也 会 触发 。 

touchmove 事件 : 当 手 指 在 屏幕 上 请 动 的 时 候 连 续 地 和 触发。 在 这 个 事件 发 生 期 间 ， 调 用 
preventDefault() 事件 可 以 阻止 滚动 。 

touchend 事件 当 手 指 从 屏幕 上 离开 的 时 候 触发 。 

touchcancel FAF: 当 系 统 停 止 跟踪 触摸 的 时 候 触发 。 关 于 这 个 事件 的 确切 触发 时 间 ， 文 
档 中 并 没有 有 具体 说 明 ， 需 要 根据 经 验 去 猜测 。 
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9.2.2 事件 对 象 数组 


正如 所 预想 的 一 样 ， 我 们 可 以 同时 用 很 多 手指 触摸 屏幕 ， 所 以 在 事件 对 象 里 提供 了 相应 
的 数组 来 存储 每 个 手指 的 信息 。 

touches: 表示 当前 跟踪 的 触 措 操 作 的 touch 对 象 的 数组 。 

targetTouches: 特定 于 事件 目标 的 touch 对 象 的 数组 。 

changeTouches: #78 H EV AMELIA STARE touch 对 象 的 数组 。 

每 个 touch 对 象 包含 的 属性 将 在 下 一 和 中 进行 介绍 。 


9.2.3 ”事件 对 象 属性 


每 个 手指 包含 有 以 下 的 信息 。 

clientX: 触摸 目标 在 视 口 中 的 x AA S. 

clientY: 触 措 目标 在 视 口中 的 y fA Py o 

identifier: 标识 触摸 的 唯一 ID。 

pageX: 触 探 目标 在 页面 中 的 x FAK pn o 

pageY: 触 探 目标 在 负面 中 的 y HAA pn 

screenX: 触摸 目标 在 屏幕 中 的 x S. 

screenY: 触摸 目标 在 屏幕 中 的 y SA. 

target: 触目 的 DOM "He Hn. 

是 时 候 该 试 试 这 些 事件 和 属性 了 ， 下 面 ， 我 们 看 看 当 这 些 事件 触发 的 时 候 ， 乞 的 触发 顺 
序 、 间 隅 时 间 以 及 记录 的 信息 运行 结果 如 几 9-3 所 示 。 


window.onload-function() { 

var firsitEmMmi LO ime — 0; 

var eventTypeArr = [eques OUGRSLEEE ; 'touchmove', 
'touchend','mousedown', 'mousemove', 'mouseover', 'mouseup']; 


qon var En 2 le event lv engeren cien pl 
// 利 用 财 包 保存 eventType, HERZ NES I) VA BT LA A ae es KY 


(funcCElion () 1 


var eventType = eventTypeArr[i]; 


document.addEventListener(eventType, function (e) { 


var curlime — (new Date () )2geerime ()}; 
if (firstEmitTime === 0) { 
firstEmitTime = curTime; 


) 

// 打 印 当前 事件 触发 时 间 与 第 一 个 事件 触发 时 间 的 差 值 

var log = eventType + ': '; 

var Cime Ey Eee! (cum me CERE mn 


if (e. touches==undefined) { 


var px "PREMA x: "+e.clIEntX+";"; 
var py = "RMD y:"te.clIlEntY+";"; 
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}else { 
wee nen = e.couches[O0]s 
it (Current) 4 
var px = "fileA x:"+current.clIEntX+";"; 


var py = "fileA y:"+current.clIEntYt+";"; 
pe Se 
var px = "触摸 位 置 x: 检 测 不 到 ;"; 


var py = "触摸 位 置 y: 检 测 不 到 ;"， 
} 

} 
Console slog (log Emme: px py); 
j); 


«c exene nor 


(x ú) Elements Console Sources Network  ,., 


© Y top v Preserve log 
touchstart: 时 间 间 隔 :0; 触 摸 位 置 x: 343.27899169921875; 
触摸 位 置 y: 102.3239974975586; 


lll AY i] (6) Ba: 6 ; 触摸 位 置 X: 检 测 不 到 ; 触摸 位 置 y :检测 不 
到 |， 


mouseover: 时 间 间 隔 ;301; BUR B x : 343; 鼠标 位 置 y; 102; 
mousemove: 时 间 间 隔 :301; 鼠标 位 置 Xx;:343 ; 鼠标 位 置 y;102 ; 
mousedown: 时 间 间 隔 :301; 鼠标 位 置 X:343; 鼠标 位 置 y; 102; 
mouseup: 时 间 间 隔 :302; 鼠标 位 置 x: 343; 鼠标 位 置 y: 102; 
Click: 时 间 间 隔 :303; 和 鼠标 位 置 x: 343; 鼠标 位 置 y;102 ; 


图 9-3 


9.3 ALPHA 


经 过 前 面 两 市 的 阐述 ， 我 们 已 经 了 解 移动 端的 触 挽 事件 的 执行 流程 ， 以 及 会 引发 的 一 些 


问题 ， 那 么 我 们 应 该 如 何 使 用 触摸 事件 来 实现 各 种 功能 呢 ? 如 果 我 们 用 原生 的 事件 来 做 的 
话 ， 会 引发 很 多 问题 ， 并 且 在 PC 端 并 不 能 够 检测 到 触 换 事件 ， 所 以 我 们 需要 将 原生 的 事件 
封 狼 ， 并 有 旦 解决 兼容 性 以 及 可 能 引发 的 一 系列 问题 。 焉 好 有 很 多 现成 的 插件 可 用 ， 比 方 说 百 
度 官 方 提供 的 touchjs 库 ， 我 们 要 实现 的 轮 播 图 的 案例 ， 就 可 以 采用 touchjs 库 来 完成 。 在 官 
方 网 站 有 详细 的 文档 说 明 ， 网 址 为 http://allcky.github.io/touchjs。 

虽然 百度 官方 文档 有 详尽 的 说 明 ， 但 我 们 还 是 有 必要 对 即将 用 到 的 一 些 事件 和 属性 做 一 
些 说 明 。 
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9.3.1. 添加 事件 语法 


A Ph: 


EOUCKZ On ( target", 


("you have done", 


9.3.2 文 拉 的 事件 


ev.type); }); 


红色 标注 的 古 我 们 要 用 到 的 事件 ， 见 表 9-1. 


旋转 


请 动 


拖 动 开始 
拖 动 
拖 动 结束 
拖 动 


TR 


por 


144 


Xx 9-1 
数 


\ 


Sh 


pinchstart 
pinchend 
pinch 
pinchin 
pinchout 
rotateleft 
rotateright 
rotate 
swipestart 
swiping 
swipeend 
swipeleft 
swiperight 
swipeup 
swipedown 
swipe 
dragstart 
drag 
dragend 
drag 


hold 


tap 


doubletap 


Down cd eSI eiu e EU Lom (ev) 


描 x 
缩放 手势 起 点 
缩放 手势 终点 

缩放 手势 

收缩 
放大 

向 左旋 转 

向 右 旋转 

旋转 
滑动 手势 起 点 

滑动 中 
滑动 手势 终点 

问 左 滑动 

DEREI 

DERE 

癌 下 滑动 

滑动 

拖 动 屏幕 

拖 动 手势 

拖 动 屏 莫 

拖 动 手势 

长 按 屏 幕 

单 击 屏 幕 

Nacht BERE 


console: Log 


移动 端 触 撞 事 件 


9.3.3 ”事件 对 象 属性 


K 9-2 列 出 了 所 有 的 时 间 对 象 属 性 ， 可 以 使 我 们 获得 事件 触发 时 的 详细 信息 。 


表 9-2 事件 对 象 


BR 性 fii — X 
originEvent 触发 某 事 件 的 原生 对 象 
type 事件 的 名 称 
rotation 旋转 角度 
scale 缩放 比例 
direction 操作 的 方 回 属性 
fingersCount 操作 的 手势 数量 
position 相关 位 置信 息 , 不 同 的 操作 产生 不 同 的 位 置信 息 
distance swipe 类 两 点 之 间 的 位 移 
distanceX, x 手势 事件 x 方 同 的 位 移 值 ， 向 左 移动 时 为 负数 
distanceY, y 手势 事件 y 方 加 的 位 移 值 , 同上 移动 时 为 负数 
angle rotate 事件 触发 时 旋转 的 角度 
duration touchstart 与 touchend 之 间 的 时 间 戳 
factor swipe 事件 加 速度 因子 
startRotate 局 动 单 指 旋转 方法 ， 在 东 个 元 素 的 touchstart 触发 时 调用 


现在 开始 介绍 我 们 的 案例 : 
1. 首先 引入 touch.js 
可 以 引用 官方 提供 的 cdn 地 址 ， 也 可 以 下 载 到 本 地 。 


Sor TO Te / / Clocl= Jock ll. com, EO 0 A 


2. 布局 页 面 


// 外 层 的 容器 当做 观察 的 窗口 
solved eassciibanneqdt 

/ / E] box YEA HBR A RICE 
<<Go Class DO 

// 我 们 将 图 上 作为 背景 放 到 a 标签 中 

<a href="#"> 
€ Bo 
«a href="#"> 
«UB 
«c oi 
t labs 
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3. 添加 CSS 样式， 使 页 面 易于 观察 


.bannert 

widi: 100 herome:. 0 posltlon: dore eub Deep 
het: O07 EO 

} 

.boxt 

width: 00 meine 0 margin Tee 101 

} 

Moo E 

iE decns lert; wn 0 nenaome = Oss 


} 

90x er ne eh db eb JE | 

sacle reouimel? ved ee nn 0 nm mn no-repeat 
center 10px; 

baekareoumed Sal we c oS 

} 

-0x mthi (2) 4 

Background puede (o in ee Ib: eei ge a Sm on) RO= 
repeat center center; 

Dackground ce cue) - 


} 
4. 添加 逻辑 代码 


var current;// 初始 化 当前 位 置 的 变量 

var num=0;// 4J484.-48j E HR Ft 

/ MARIER RAE, WARE WERE EL 

iom elm om een eade amt |, TOUGH NO I in 
S(O Ole) ees ce 

transition: “monet 

}) 
cürrent-parselnt (o(" {box ess time guise t 
j) 

// 添 加 拖 搜索 件 ， 实 时 监测 图 户 的 位 置 和 方 回 
EU De ga funnel on (Ge 

S (W SOX") .Coes( 

marginLeft: e.x+current 

}) 

}) 

// 洪 加 拖 搜 完成 事件 ， 确 定 最 终 拖 搜 方 同 和 完成 位 置 
Couch om oo oragesngqg runc Lione) 
// 如 果 方 向 是 左 侧 的 处 理 方式 


if (e.dinreccion——" lene”) { 


num++; 


a e t" loose a”) s Leiacrela= 1) 1 
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} 
// 如 来 方 四 是 右 侧 的 处 理 方式 
relse 1f (e.directlon =" mage) 
num; 
if (num<0) { 
num-0; 
j 
} 
/ /判断 拖 搜 的 速度 和 距离 ， 来 确定 图 片 最 终 是 回 弹 还 是 到 下 一 张 
Tite. factor<4| | Math abs (2.x) 2300) { 
Su ese) aes s(t 


transition: margin ose ca ei, 


marginLelt: num L100 T 

j) 

telse{ 

Casio!) jess Ct 
eames ion. margin os Ca- e7, 
marginLeft:current 

j) 

} 


Console loo mie 


ia) 
效果 如 图 9-4 所 示 。 


WEB 前 端 工程 师 实 训 


— WaT Aa = >) | co 
成 为 Hx ZIEL 的 前 端 工 程 师 A | me TUNE. 


优 逸 客 ， 为 梦想 步 入 高 端 互联 网 领域 的 大 学 生 ， 
提供 高 品质 的 实 训 平台 与 高 新 就 业 的 机 会 。 


图 9-4 最 终 效 果 图 
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离线 应 用 


10.1 离线 应 用 概述 


前 面 的 章节 中 我 们 曾 使 用 localStorage 把 一 些 数据 保存 到 本 地 ， 实 现 了 一 个 可 编辑 表 


格 。localStorage 搭配 HIMLS 中 提供 的 在 线 离线 事件 ， 以 及 离线 资源 (注意 ， 是 资源 ， 不 是 
数据 ) 缓存 ， 可 以 让 我 们 制作 一 些 功能 更 强大 的 应 用 。 
在 开发 文 持 离 线 的 Web 应 用 程序 时 ， 开 发 者 通常 需要 使 用 以 下 三 个 方面 的 功能 。 
e 离线 资源 缓存 : 需要 一 种 方式 来 指明 应 用 程序 离线 工作 时 所 需 的 资源 文件 。 这 样 ， 
浏览 器 才能 在 在 线 状态 时 ， 把 这 些 文件 缓存 到 本 地 。 此 后 ， 当 用 户 离 线 访问 应 用 程 
序 时 ， 这 些 资源 文件 会 自动 加 载 ， 从 而 让 用 户 正 常 使 用 。 在 HIMLS 中 ， 通 过 cache 
manifest 文件 指明 需要 绥 存 的 资源 ， 并 文 持 上 自动 和 手动 两 种 缓存 更 新 方式 。 
e 在 线 状 态 检 测 : 开发 者 需要 知道 浏览 器 是 否 在 线 ， 这 样 才 能 够 针对 在 线 或 离线 的 状 
态 ， 做 出 对 应 的 处 理 。 在 HIMLS 中 ， 提 供 了 两 种 检测 当前 网 络 是 否 在 线 的 方式 。 
e 林地 数据 存储 : 离线 时 ， 需 要 能 够 把 数据 存储 到 本 地 ， 以 便 在 线 时 间 步 到 服务 器 
上 。 为 了 满足 不 同 的 存储 需求 ，HIMLS 提供 了 DOM Storage 和 Web SQL Database 
两 种 存储 机 制 。 前 者 提供 了 易 用 的 key/value 对 存储 方式 ， 而 后 者 提供 了 基本 的 关系 
数据 库存 储 功能 。 


10.2 ”离线 资源 缓存 


为 了 能 够 让 用 户 在 离线 状态 下 继续 访问 Web 应用， 开发 者 需要 提供 一 个 cache manifest 
文件 。 这 个 文件 中 列 出 了 所 有 需要 在 离线 状态 下 使 用 的 资源 ， 浏 览 右 会 把 这 些 资源 缓存 到 本 
地 。 本 节 先 通过 一 个 例子 展示 cache manifest 文件 的 用 途 ， 然 后 详细 摘 述 其 书写 方法 ， 最 后 
说 明 绥 存 的 更 新 方式 。 

cache manifest 示例 : 

我 们 通过 W3C 提供 的 示例 来 说 明 cache manifest 文件 的 用 法 。Clock Web 应 用 由 三 个 文 
件 “clock.html”“clock.css” 和 “clock.js” 组 成 。 

Clock 应 用 代码 : 

ek e DOC YE em Nem head. 


<title>Clock</title> 
SR 


<link rel="stylesheet" href="clock.css"></head><body> 
Te “cine ss ouu db veloolk I SIDE owie 197 s sock < em 
<style>output { font: 2em sans-serif; }</style> 


—S Crip 
setTimeout (function () { 
document.getElementById('clock').value = new Date (); 


PA OOO SCEE 


当 用 户 在 离线 状态 下 访问 “clock.html” 时 ， 页 面 将 无 法 展现 。 为 了 文 持 离线 访问 ， 开 


149 


HTML5 
ks 
发 者 必须 添加 cache manifest 文件 ， pectin 的 资源 。 这 个 例子 中 的 cache manifest 文件 


为 “clockmanifest”， 它 声明 了 3 个 需要 缓存 的 资源 文件 “clockhtml”“clockcss ”和 
“clock.js”. 


clock.manifest 代码 ; 


CACHE MANIFEST 
Glock nem: 
Gerd ESS 


Clock S 


添加 了 cache manifest 文件 后 ， 还 需要 修改 “clock.html”， 把 <html> 标签 的 manifest 属 
性 设置 为 “clock.manifest”。 修改 后 的 “clock.html” 代 人 如 下 : 


<l- ‘Clock mm ><IDOCTYPE html -html manifesi="clock.manifest"=hcead 
itle nC lock ele 

eeo o lok s cub 

<link rel="stylesheet" href="clock.css"></head><body> 

<p ihe bine te: Oued Clock /ou ue /< oo < /erm 


修改 后 ， 当 用 户 在 线 访 问 “clock.html” 了 时， 浏览 器 会 缓存 “clock.html”“clock.css ”和 
“clock.js” 文 件 ， 而 当 用 户 离 线 访 问 时 ， 这 个 Web 应 用 也 可 以 正常 使 用 了 。 

下 面 说 明 书 写 cache manifest 文件 需要 避 循 的 格式 。 

e 首 行 必 须 是 CACHE MANIFEST. 

e 之 后 ， 每 一 行列 出 一 个 需要 缓存 的 资源 文件 名 。 

e 可 根据 需要 列 出 在 线 访问 的 白 名 单 。 折 名单 中 的 所 有 资源 不 会 被 缓存 ， 在 使 用 时 将 
直接 在 线 访问 。 声 明白 名单 使 用 NETWORK: 标识 符 。 

e 如 果 在 日 名 蛙 后 还 要 补充 需要 缕 存 的 资源 ， 可 以 使 用 CACHE: 标识 符 。 

e 如 果 要 声明 某 URI 不 能 访问 时 的 替补 URI， 可 以 使 用 FALLBACK: 标识 符 。 其 后 
的 每 一 行 包 含 两 个 URI， 当 第 一 个 URI 不 可 访问 时 ， 浏 览 费 将 尝试 使 用 第 二 个 
URI. 

e 注释 要 另 起 一 行 ， 以 # 号 开头 。 

cache manifest 示例 : 


CACHE MANIFEST 

# 卡 一 行 是 必须 书号 的 。 
images/sound-icon.png 
images/background.png 

NETWORK: “comm eo 

CACHE: style/default.css 

FALLBACK: /files/projects /projects 


更 新 缓存 : 
应 用 程序 可 以 等 符 浏 览 右 目 动 更 新 缓存 ， 也 可 以 使 用 Javascript 接口 手动 触发 更 新 。 
e 目 动 更 新 
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离线 应 用 
浏览 器 除了 在 第 一 次 访问 Web 应 用 时 绥 存 资源 外 ， 只 会 在 cache manifest 文件 本 身 发 生 
变化 时 更 新 缓存 ， 而 cache manifest 中 的 资源 文件 发 生变 化 并 不 会 触发 更 新 。 
e 于 动 更 新 
我 们 也 可 以 使 用 window.ApplicationCache 的 接口 更 新 缓存 。 方 法 是 检测 window. 
ApplicationCache.status 的 值 ， 如 果 是 UPDATITEREADY ， 那 么 可 以 调用 window.Application 
Cache.update() V rZ Fs IRA RAU Ph. 
if (window.ApplicationCache.status == window.ApplicationCache.UPDATEREADY) { 


window.ApplicationCache.update(); 


} 


10.3 ”在线 状态 检测 


如 果 Web 应 用 程序 仅仅 是 一 些 静 态 页 面 的 组 合 ， 那 么 通过 cache manifest 绥 存 资源 文件 


以 后 ， 束 可 以 文 持 离线 访问 了 。 但 是 随 看 互联 网 的 发 展 ， 特 别 是 Web 2.0 概念 流行 以 来 ， 用 
户 提交 的 数据 渐渐 成 为 互联 网 的 主流 。 那 么 在 开发 文 持 离 线 的 Web 应 用 时 ， 怠 不 能 仅仅 满足 
于 毅 态 页 面 的 展现 ， 还 必需 考虑 如 何 让 用 户 在 离线 状态 下 也 可 以 操作 数据 。 离 线 状 态 时 ， 把 
数据 存储 在 本 地 ; 在 线 以 后 ， 再 把 数据 同步 到 服务 右上。 

为 了 做 到 这 一 点 ， 我 们 首先 必须 知道 浏览 句 是 否 在 线 。HIML35S 提供 了 两 种 检测 是 人 否 在 
线 的 方式 : navigator.onLine 和 online/offline 事件 。 

€ navigator.onLine 

navigatoronLine 属性 表示 当前 是 否 在 线 。 如 果 为 tue， 表 示 在 线 ; WRN false, KRA 
线 。 当 网 络 状态 发 生变 化 时 ，navigator.onLine 的 值 也 随 之 变化 。 开 发 者 可 以 通过 该 取 它 的 值 
获取 网 络 状 态 。 

@ online/offline 事件 

当 开 发 离线 应 用 时 ， 通 过 navigatoronLine 获取 网 络 状 态 通 音 是 不 够 的 。 开 友 者 还 需要 在 
网 络 状态 发 生变 化 时 立刻 得 到 通知 ， 因 此 HTMLS 还 提供 了 online/offline 事件 。 当 在 线 / 离 线 
TRA WJ PRAY, online/offline 事件 将 触发 在 body RE, J HÆ document.body、document 
和 window 的 顺序 冒 泡 。 因 此 ， 开 发 者 可 以 通过 监听 它们 的 online/oftline 事件 来 获悉 网 络 
状态 。 


10.4 ”离线 应 用 示例 


最 后 ， 我 们 通过 一 个 例子 来 说 明 使 用 HTMLS5 开发 离线 应 用 的 基本 方法 。 这 个 例子 会 用 
到 前 面 提 到 的 离线 资源 绥 存 、 在 线 状态 检测 和 DOM Storage 等 功能 。 假 设 我 们 开发 一 个 便签 
管理 的 Web 应 用 程序 ， 用 户 可 以 在 其 中 添加 和 删除 便签 。 它 支持 离线 功能 ， 人 允许 用 户 在 离线 
状态 下 洪 加 、 删 除 便签 ， 并 且 当 在 线 以 后 能 够 同步 到 服务 如 上 。 

这 个 程序 的 界面 很 简单 。 用 户 点 击 “New Note” 按 钮 可 以 在 弹出 框 中 创建 新 的 便签 ， 双 
TAN AE RE AEN E o 
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HTML5 


| 实战 宝典 


Xii HTML fVf3: 


<html manifest="notes.manifest"><head> 

<script type-"text/Javascript" src="server.js"></script> 
<script type="text/Javascript" src="data.js"></script> 
<script kype—' bexe/ Javascript src "UI. ists scm 
<title>Note List</title></head> 

-Dody onload SvneWithoerver(y ”> 

<input type="button" value="New Note" onclick-2"newNote()"» 
«cu spoke qoa eres /ol oou acai 


1. cache manifest 文件 

xe X cache manifest 文件 ， 声 明 需 要 绥 存 的 资源 。 在 这 个 例子 中 ， 需 要 绥 存 “index.html” 
“serverjs”“data.js” 和 “UIjs”4 个 文件 。 除 了 前 面 列 出 的 “index. html” 外 ，“server.js” 
“data.js” 和 “UIjs” 分 别 包 含 服务 器 相 天 、 数 据 存 储 和 用 户 界 面 代 人 三 。 


2. cache manifest 文件 定义 


HP Z BI 


CACHE MANIFEST 
index.html 


Server, ]s 


data.js 
UT S 
用 户 界 和 面 代码 定义 在 ULjs: 
function newNote() { 
var title = window.prompt ("New Notes”); 
if (title) 
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{ 
add (ei ele): 


) 
function add(title){ 


// 在 界面 中 添加 

Bele Titem(tit Ie). 

// 在 数据 中 添加 

addbacaltem(trtie) 
} 


function remove (title) { 


// 从 界面 中 删除 
removeUIItLem (title) ; 
// 从 数据 中 删除 
removeDataltem(title); 


) 
function addUIItem(title)| 


离线 应 用 
Var atem = document .createblement ("li"); 
item.setAttribute("ondblclick", "remove ('"+title+"!')"); 
ute cmm cs pM tae MEUS 
var she document getElement i lise 
list.APPendChild(item) ; 
} 
function removeUIItem(title) { 
var liesl oooument etelementBy een epe 
| 
if (list.children[i].innerHTML == title) 
{ 
lior remove Mild ne ec hirldrem | 


} 


ULjs 中 的 代码 包含 添加 便签 和 删除 便签 的 界面 操作 。 

e AJ 

用 户 点 击 “New Note" H, newNote 国 数 和 被 调用 。 

newNote pk 24S s HOS tte, FR NCSTEEAS PIE. newNote 调用 add 函数 。 

add 函数 分 别 调用 addUIItem £l addDataltem 添加 页 面 元 素 和 数据 。addDataItem 代码 将 在 
ja f tH o 

addUlIItem 函数 在 页 面 列 表 中 添加 一 项 ， 并 指明 ondblclick 事件 的 处 理 函 数 是 remove， 使 
得 双击 操作 可 以 删除 便签 。 

e 删除 便签 

用 户 双击 未 便签 时 ， 调 用 remove 函数 。 

remove 图 数 分 别 调 用 TremoveUIItem 和 removeDataltem W KR v4 m 26 2& A BU HC 
removeDataltem 将 在 后 面 列 出 。 

removeUIItem PK 2509] IR va rf] 71-25 FA A DY 


3. 数据 存储 代码 
数据 存储 代码 定义 在 data.js 中 。 


var Storage — window |" locallseouage |; 
function addDatalItem(title) | 
if (navigator.onLine) // TEZERA 
{ 
addServerItem(title); 
} 
else // 离线 状态 
{ 
var str = storage.getItem("toAdd"); 
if(str == null) 
{ 
str = title; 
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STE = STE + Ue eee 
| 
storage.setItem("toAdd", str); 


} 
function removeDatalItem(title) { 
if (navigator.onLine) // FEZEKA 
{ 
removeServerItem(title); 
} 
else // 离线 状态 
{ 
var str = storage.getItem("toRemove"); 
if(str == null) 
{ 
Sipe e misse 
| 
else 
{ 
ste = BE + YW + Citle; 
} 


SCO cc es Ser Leen eb Sue 


) 
Tour cones yacnithoerver()] 
// 如 果 当 前 是 离线 状态 ， 不 需要 做 任何 处 理 


if (Navigator.onlhane == false) return; 


Wels ns 

// 和 服务 器 同步 添加 操作 

var str = storage.getItem("toAdd"); 
LE (Ste — null) 

{ 


var additems Petre el 


tor = O0 TT<adgdltems Iength lese) 
{ 

addDataltem(addlItems[i]); 
) 


Gre SVeIe 4 SMO we Tte em (t^ eol s 


// RB A s Fe D RE 


str = storage.getItem("toRemove"); 


离线 应 用 
LE (stie l= null) 
{ 
var removeltems = ot ies Ollie (aia: 
Ore (Gh a ea Imo messem false) 


{ 

removeDataltem(removeltems[i]); 
} 
BeOS Tm SL em or me ese 


} 


// 删除 界面 中 的 所 有 便签 

var list -~ documenti egetElementBvid( lies: ).: 
while(list.lastChild != list.firstElementChild) 
list.removeChild(list.lastChild); 
if(list.firstElementChild) 

list, removeCha ld (lise  firscer lementClai la) 


// 从 服务 器 获取 全 部 便签 ， 并 显示 在 界面 中 
var alliItems = getServerItems(); 


LE (ala sense") 
{ 
var iteme- "ell weiss ola aT 
Or O a aeee l engh ees 
{ 
eem cen (meems il 


} 


rwindow.addEventListener (“onlaine”, SynmneWithoerver false); 


data.js 中 的 代码 包含 添加 便签 、 删 除 便 签 和 与 服务 器 同步 等 数据 操作 。 其 中 用 到 了 
navigator.onLine 属性 、online 事件 、DOM Storage 等 HIMLS 的 新 功能 。 

e 添加 便签 : addDataltem 

通过 navigatoronLine A Wre nE. WREE, IAH addServerltem 直接 把 数据 存 
储 到 服务 器 上 。addServerltem 将 在 后 面 列 出 ; 如 采 离 线 ， 那 么 把 数据 添加 到 localStorage 的 
“toAdd” 项 中 。 

e 删除 便签 : removeDataltem 

通过 navigatoronLine 判断 是 否 在 线 。 如 采 在 线 ， 那 么 调用 removeServerItem 直接 在 服务 
器 上 删除 数据 。removeServerltem 将 在 后 面 列 出 ， 如 采 离 线 ， 那 么 把 数据 添加 到 localStorage 
的 “toRemove” 项 中 。 

e 数据 同步 : SyncWithServer 

在 data.js 的 最 后 一 行 ， 注 册 了 window 的 online SF AE pk 2% SyncWithServer. “4 online 
事件 发 生 时 ，SyncWithServer 将 被 调用 。 其 功能 如 下 : 如 果 navigator.onLine KIR 4 fill E Zi, 
则 不 做 任何 操作 。 把 localStorage 中 “toAdd” 项 的 所 有 数据 添加 到 服务 器 上 ， 并 删除 
“toAdd ”项 。 把 localStorage 中 “toRemove” 项 的 所 有 数据 从 服务 器 中 删除 ， 并 删除 
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HTML5 
E 
“toRemove” IH. 
e 删除 当前 页 面 列表 中 的 所 有 便签 
调用 getServerItems 从 服务 器 获取 所 有 便签 ， 并 添加 在 页 面 列表 中 。getServerItems 将 在 
后 面 列 出 。 
4. 服务 器 相关 代码 
服务 器 相关 代码 定义 在 serverjs "P. 


Fumetron ado erverlitem(tit le 
// 在 服务 器 中 添加 一 项 

} 

function removeServerItem(title)( 
// 在 服务 器 中 删除 一 项 

| 

tumneol onv get erverltems (el 
// 返回 服务 右 中 存储 的 便签 列表 

} 


由 于 这 部 分 代码 与 服务 器 有 关 ， 这 里 只 说 明 各 个 函数 的 功能 ， 有 共 体 实现 方式 可 以 根据 不 
同 服务 器 编写 代码 。 

e 在 服务 器 中 添加 一 项 : addServerltem 

e 在 服务 器 中 删除 一 项 : removeServerItem 

e 返回 服务 器 中 存储 的 便签 列表 :，getServerItemas 
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第 11 章 


History 历史 记录 


Ak f EP RADAR 
11.1 应 用 场景 


11.2 HTMLS5 历史 记录 详解 
11.3 history 新 特性 结合 ajax 增强 单 页 面体 验 


11.1 m RAE 


单 页 面 应 用 ， 异 步 加 载 ， 投 需 加 载 是 我 们 在 开发 每 一 个 应 用 时 都 会 涉及 的 概念 ， 尤 其 在 
CURD 场景 中 ， 这 种 应 用 几乎 成 为 标 配 。 在 HIML4 时 代 我 们 实现 单 页 面 应 用 的 方法 有 Ajax 
和 过 ame， 这 两 种 方法 各 有 优 缺点 。 

C1) Ajax 可 以 实现 页 面 的 无 刷新 操作 ， 但 会 因为 URL 地 址 没有 改变 ， 无 法 使 用 前 进 、 
后 退 按钮 。 例 如 第 见 的 Ajax 分页， 在 第 一 页 点 击 第 二 页 的 链接 ，Ajax 分 页 完成 后 ， 浏 览 器 
地 址 栏 上 显示 的 UREL 依然 是 第 一 页 的 URL， 使 用 后 退 按钮 也 无 法 回 到 第 一 页 ， 这 种 体验 难 
免 会 对 用 户 造 成 不 便 。 

随后 机 智 的 前 问 工 程 师 们 想到 了 使 用 hash 值 在 UREL 结尾 添加 形 如 “大 xx” 的 标识 ， 然 后 
用 onhashchange 等 方式 监听 hash 值 的 变化 并 作出 相应 处 理 ， 使 得 URL 形成 历史 记录 ， 从 而 能 让 
用 户 完成 前 进 和 后 退 。 但 是 这 样 并 不 利于 搜索 引擎 的 优化 ， 而 且 得 做 大 量 的 代码 处 理 风 辑 。 

(2) 窗口 分 帧 技术 iframe， 在 一 定 程 上 度 上 也 能 解决 单 页 面 的 应 用 。 但 是 窗口 分 帧 技 
术 的 本 质 是 将 浏览 右 窗 口 分 为 多 个 窗口 ， 这 样 必 然 会 叶 八 各 个 窗口 之 间 的 通信 困难 。 而 且 这 
种 技术 对 于 搜索 引擎 也 并 不 友好 ， 所 以 我 们 经 常会 在 网 站 的 后 台 见 到 这 种 技术 ， 一 般 不 会 用 
在 前 台 页 面 当中 。 

history 对 象 从 HIML4 开始 引入 ， 有 我 们 熟悉 的 history.go() . history.back() 和 history. 
forward() 方 法 。HTMLS5 中 增加 了 pushState 和 replaceState 两 个 方法 ， 以 及 popstate 事件 。 新 
增 的 这 些 方法 和 事件 能 够 玫 助 我 们 优雅 地 实现 单 页 面 应 用 ， 同 时 又 不 会 影响 搜索 引擎 对 我 们 
网 站 的 搜 录 。 现 在 所 有 的 浏览 右 都 已 丝 文 持 这 些 狐 的 特性 ， 并 且 涌 现 出 大 量 的 路 由 框架 ， 都 


内 置 集成 了 这 些 狐 的 特性 。 例 如 音 名 的 angularjs 框 染 里 面 的 angular-route 等 路 由 框架 。 


11.2 HTML5 历史 记录 详解 


我 们 先 来 回顾 一 下 HTML4 的 history 对 象 给 我 们 提供 的 方法 以 及 属性 。 
1. back() 方 法 
window history. ackl(), 


使 用 back0 方 法 可 以 在 用 户 的 历史 记录 的 堆栈 中 后 退 ， 它 的 效果 相当 于 点 击 浏览 器 工具 
栏 的 后 退 投 锂 。 
2. forward() 方 法 


window. nNiotor, oT ws dq 
同样 的 ， 也 可 以 用 以 上 方法 产生 用 户 前 进行 为 。 
3. go() 方 法 


window history .ool l); 
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History 历史 记录 


移动 到 历史 记录 中 特定 的 位 置 。 
用 户 可 以 使 用 go0 方 法 从 历史 中 载 入 特定 的 页 面 。 
4. length 属性 


window history length 


还 可 以 通过 检查 浏览 器 历史 记录 的 length 属性 来 找到 历史 记录 堆栈 中 的 页 面 总 数 。 

上 面 我 们 对 HTML4 里 面 的 history 对 象 做 了 回顾 ， 因 为 我 们 仍 会 用 到 这 些 属性 和 方法 。 
接 下 来 ， 我 们 要 对 histroy 里 面 的 新 特性 进行 讲解 。 

1. pushState() 

pushState() 的 作用 是 问 历史 记录 的 堆栈 中 压 入 一 条 记录 ， 该 方法 有 三 个 参数 : 

state object 一 一 一 个 对 象 ， 用 于 保存 状态 信息 ， 当 popstate 事件 被 触发 时 ，popstate 事件 
对 象 的 state 属性 会 包含 相应 的 state object 的 备份 。state object 的 容量 很 小 (Firefox 中 强制 为 
640KB )， 如 果 需 要 储存 较 大 的 数据 ， 建 议 使 用 localStorage 或 sessionStorage。 

title 一 一 被 压 入 的 历史 记录 的 页 面 的 标题 ， 该 属性 暂时 被 所 有 浏览 器 忽略 ， 实 际 开 发 时 
可 以 填 入 空 学 符 或 一 个 简短 的 标题 。 

URL 一 一 新 的 历史 记录 的 地 址 ， 可 以 是 相对 路 径 或 绝对 路 径 ， 和 在 为 相对 路 径 则 以 当前 
URL JHE. 

2. replaceState() 

replaceState() 方法 与 pushState( 方法 类 似 ， 参 数 与 pushStateO 也 相同 ， 但 replaceState0 方 法 
会 替换 当前 的 历史 记录 而 并 非 创建 新 的 记录 。 因 此 在 需要 更 新 当前 历史 记录 的 state object 
或 URL 时 ， 使 用 该 方法 会 更 加 合适 。 

3. popstate 事件 


window. onpopstate=function () { 
console.log (changed. ) 


} 


当 用 户 在 HTML 页 耐 引 入 这 段 代 人 码 以 后 ， 束 会 发 现 这 个 事件 并 没有 触 友 ， 那 么 它 的 触 
发 时 机 是 什么 呢 ? 我 们 再 来 回顾 下 上 面 的 两 个 方法 : pushState0 和 replaceState()。 

这 两 个 方法 会 将 地 址 栏 里 面 的 URL 改变 ， 但 浏览 右 不 会 加 载 对 应 的 页 面 ， 即 使 这 个 页 
面 存 在 也 不 会 加 载 。 也 就 是 说 并 不 会 通知 浏览 器 去 加 载 狐 的 URL 地址 ， 只 是 会 将 地 址 栏 里 
AY URL 进行 更 改 从 而 形成 历史 记录 ， 其 实 是 还 是 在 本 页 面 当中 ， 接 下 来 你 就 可 以 在 页 面 
当中 进行 其 他 操作 ， 比 方 说 利用 Ajax 加 载 新 的 内 容 到 页 面 当 中 。 

但 是 在 历史 记录 当中 进行 前 进 和 后 退 的 时 候 ， 我 们 如 何 通 知 浏览 器 完成 该 做 的 事情 呢 ? 

IX IE ze popstate 这 个 事件 的 意义 所 在 ， 当 我 们 操作 前 进 和 后 退 通过 pushState) 以 及 
replaceState() 改 变 的 记录 时 ， 这 个 事件 束 触 发 了 。 当 这 个 事件 触发 的 时 候 ， 我 们 就 可 以 实现 
我 们 想 做 的 事情 ， 例 如 将 某 个 页 面 的 信息 通过 Ajax 放 在 本 页 面 当 中 。 值 得 注意 的 是 这 个 事 
件 并 不 属于 history 对 象 而 是 属于 window XJ 2. 

MV nd A, Nel] popstate 这 个 事件 发 生 的 时 候 ， 我 们 如 何 知 道 当 前 的 
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URL 处 在 哪 一 种 状态， 所 以 必定 要 有 一 个 属性 来 记录 当前 路 由 的 状态 。 
4. state 属性 


history.state 


这 个 属性 能 记录 一 坚 状 态 信息 ， 但 是 它 并 不 会 目 己 记录 ， 一 般 来 说 它 的 值 是 null， 如 末 
你 枪 让 它 有 值 的 话 ， 还 记得 前 面 的 replaceState0 方 法 与 pushState0 这 两 个 方法 吗 ? 这 两 个 方 
法 分 别 有 三 个 参数 ， 其 中 第 一 个 参数 ， 可 以 设置 一 个 对 象 〈《 目 定义 )， 在 这 个 对 和 象 里 面 保存 
ie 可 以 在 history.state 里 面 返回 ， 当 你 得 到 你 目 己 设 置 的 状态 信息 时 ， 即 可 进行 下 


11.3 history 新 特性 结合 ajax 增强 单 页 面体 验 


前 面 两 节 已 经 将 所 需 的 知识 点 做 了 完善 的 铺垫 ， 那 么 ， 接 下 来 我 们 通过 一 个 小 案例 ， 来 
加 深 对 history 新 特性 的 理解 。 
(1) 先 在 页 面 当中 创建 3 个 按钮 : 


< oe "vom eon 
<button type="button"> | 2«/button» 
< on type=" buLton > jan /neon 


FED bias IRL HG REL, AUS 11-71 所 示 。 


按钮 1 ”按钮 2 按钮 3 


图 11-1 
(2) 放 一 个 容器 到 HTML 页 面 中 ， 用 于 点 击 按钮 的 时 候 盛 放 不 同 的 内 容 : 


x << au 
ANS (ETE EDU. WIE CSS 样式 ， 如 图 11-2 Ata. 


fiin! ”按钮 2 ” 按钮 3 


图 11-2 
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位 人 = 
a 11 草 
History 历史 记录 
<style> 
IDEA 
widih: 1 0px: height: o0 6» 
bouden o onoo; 


} 
</style> 


G) 页 面 的 样式 和 结构 完成 了 ， 是 时 候 实 现 我 们 的 业务 逻辑 了 。 首 先 我 们 用 json 格式 模 
拟 一 些 数据 。 


< or igo 


var data=[ 
Cons: VOUC 
Teone es p 
(eoni a22 | 
coa 


(4) Be PRET SHE TR, AA ERAH, eds LIRE HB BLA TRI IAS, d 
H. URL 地 址 也 要 发 生变 化 。 


// 获 得 所 有 按钮 的 集合 
var btns-document.getElementsByTagName ("input"); 
// 获 得 容器 的 对 象 


var ul-document.getElementsByTagName ("ul") [0]; 


tor (vee. aco ear tm en Tt 4 
(Hume rt Wom (a) 4 
rms - oncelicks=tunccion (h) <4 
/ / ALAN Ae, RIED Sia PE TE, WIRK, 2f ARE SI 
/ /url 的 状态 ， 以 及 对 应 的 URL 的 变化 地 址 
er le de) fae: 
// 然后 将 模拟 数据 里 面 对 象 的 内 容 放 到 容器 里 面 


úl. innerATMi caesus ler 


acm 
} 
(5) 但 是 似乎 缺少 了 什么 步骤 。 当 我 们 进行 前 进 或 后 退 的 时 候 ， 也 需要 能 够 在 容器 里 面 
出 现 相 应 的 内 容 ， 如 何 实现 呢 ? 只 要 稍 作 添加 即 可 ! 


window. onpopstate=function () { 
// 当 历史 记录 发 生变 化 的 时 候 ， 读 到 相应 的 页 面 保存 的 状态 ， 根 据 状态 将 对 应 的 模拟 数据 写 入 到 
"EL P 

ul.cnnercHrTMLhedatalhrstory-state.state]|-trutlie. 


} 


(60 还 有 一 个 问题 需要 解决 ， 当 我 们 和 直接 访问 URL 地 址 的 时 候 ， 容 兹 中 并 没有 出 现 相 
应 的 内 容 ， 我 们 需要 对 URL 地 址 稍 作 处 理 : 
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/ /'F& URL Shika ARE, JEBR dC T EC SU BATTU SG EE ER FP 
var hash-location.hash; 


ul.innerHTML=data[ hash.slice(-1)].title; 


运行 结果 如 图 11-3 所 示 。 


localhost:63342/w1511/aaaaa/demo.html#/0 
A 有 道 网 页 翻译 2.0 


】 技 钮 1 技 钮 2 。” 技 钮 3 


a 


图 11-3 


CD 最 后 ， 我 们 结合 
2d ee 

为 了 方便 起 见 ， 页 面 样式 不 会 发 生变 化 ， 但 是 我 们 要 将 模拟 的 数据 放 到 HTML 文件 里 
Hi, Æ HTML 文件 里 面 ， 包 含 不 同 的 内 容 ， 如 图 11-4 Ara. 


Ajax 实现 在 单 页 面 中 呈现 不 同 页 面 的 内 容 ， 同 时 URL 地 址 会 发 生 


i| 1.html 
il 2.html 
i) 3.html 


图 11-4 


(8) 我 们 现在 只 需要 将 取 模 拟 数据 的 地 方 改 成 用 Ajax 取 不 同 的 页 面 即 可 ， 整 体 代码 
如 下 : 


SiG nb 


window.onload = Function n | 
var btns = document.getElementsByTagName ("button"); 
var ul = document.getElementsByTagName ("div") [0]; 
Eap ae 人 TIRE 人 lays base dit rd 
(function (1) 4 
bene li onclick = function () 4 

netorn pon tote et 0 NUS Olt ein) ie. 
// 通 过 Ajax 取 页 面 的 内 容 


ajax (i) 


je XC) 
} 
// 当 历史 记录 发 生变 化 时 , 取 对 应 的 内 容 
window.onpopstate = function () { 


ajax mex: etate S Uarte) 
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ABD BAIR 


12.1 Hbuilder FRR 

12.2 HBuilder Webview 详解 
12.3 新 闻 APP 页 面 制作 

12.4 ”结合 HBuilder 实现 新 闻 APP 


新 闻 APP 


12.4 HBuilder 开发 环境 


“ 工 售 善 其 事 ， 必 先 利 其 占 ”。 一 个 优秀 的 开发 环境 是 成 功 完 成 项 目 开 发 的 先决 条 件 。 
在 本 章 中 ， 我 们 用 到 的 开发 工具 是 HBuilder。HBuilder 是 DCloud (CHER) 推出 的 一 
ak x HF HTMLS 的 Web 开发 IDE《〈 集 成 开发 环境 )。“ 和 急速 ”是 HBuilder 最 大 的 优势 ， 通 过 
极其 完整 、 人 全面 的 语法 提示 ，HBuilder KA Hh Aud f F R J H EA HE Hh $2 7I 
JS HTML, CSS, JS IJF AU. "EXTUS T Xem RE EMA V AR TEX. BEF 
来 我 们 从 几 个 方面 对 HBuilder 进行 简单 的 介绍 。 


12.1.1 HBuilder 优势 


下 面 介 绍 HBuilder 有 哪些 优势 。 

1. 以 “ 快 ” 为 核心 

HBuilder 可 以 说 是 目前 Web 开发 中 最 快速 的 IDE。HBuilder 提供 了 最 全 面 的 提示 功能 3 
且 引 入 了 “快捷 键 语 法 ”的 概念 ， 很 好 地 解决 了 开发 者 记 不 住 快 捷 键 的 烦恼 。 开 发 者 只 需要 
记 住 几 条 语法 ， 残 可 轻松 快速 实现 跳 转 、 转 义 和 其 他 操作 。 比 如 《Alt+r[》 是 跳 转 到 括号 ， 
《Altt”〉 是 跳 转 到 引 写 ，《Altt 邹 母 ， 是 跳 转 六 单项 ， 而 《Altt 左 〉 则 是 跳 转 到 上 一 次 光标 位 
置 。 而 Ctrl 则 可 以 控制 操作 ， 比 如 《Ctrlitd> 就 是 删除 一 行 ， 按 下 (Ctritp〉 进 入 边 看 边 改 视 
Kl. (shift〉 键 则 是 转 义 的 作用 ， 比 如 《Shift+ 回 车 > 是 <br/>，(Shiftt+ 空 格 〉 是 &nbsp。 

2. 绿色 主题 ， 更 加 保护 健康 

黑色 主题 看 起 来 比较 酷 ， 但 是 如 果 人 有 眼 长 期 看 独 黑 色 的 界面 ， 当 要 切换 视野 看 别 的 事物 
时 ， 吏 会 产生 军 上 蚁 。 使 用 绿色 主题 更 易 让 我 们 联想 到 大 上 自然 使 我 们 的 心情 和 舒畅， 同时 使 用 绿 
色 主 题 ， 程 序 员 疫 荔 值 上 升 的 相对 缓慢， 注意 力也 更 加 的 集中 。 对 独 这 样 的 界面 号 代 但 ， 感 
觉 要 比 太 亮 或 太 瞳 的 界面 舒服 很 多 。 

3. HBuilder 的 编写 用 到 了 Java. C. Ruby 

HBuilder HI lA 42 tH — EE T fet PPS ETE SRA EH). AON REPRE SS, us 
非常 的 清楚 ， 每 个 功能 用 哪 种 语言 更 合适 ， 就 用 哪个 语言 。HBuilder 本 身 主 体 是 基于 
Ecilpse FS, A Java 实现 的 ， 所 以 顺 其 目 然 地 兼容 了 Eclipse 平台 的 插件 。 但 因为 Java 2X 
率 低 ， 所 以 用 C 语 言 写 了 启动 器 。HBuilder 柔和 的 绿色 界面 设计 需要 动态 调节 屏幕 亮度 ， 
它 还 支持 手机 数据 线 真 机 调试 ， 而 这 些 都 是 用 C 语 言 写 的 。 最 后 ， 代 码 块 、 快 捷 配 置 命令 
脚本 ， 则 是 用 Ruby 开发 的 。 

4. 最 全 的 语法 库 和 兼容 性 数据 库 

Web 标准 的 发 展 速 上 度 是 非常 快 的 ， 各 个 浏览 器 的 扩展 语法 ， 儿 平 每 次 浏览 器 版 本 升级 ， 
都 会 产生 新 的 标签 或 语法 ， 但 是 HBuilder 都 会 以 最 快 的 速度 将 其 收录 其 中 。 
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12.1.2 用 HBuilder 开发 移动 APP 


人 简要 开发 过 程 如 下 : 

(1) HBuilder 官方 网 站 (http:/www.dcloud.io/) 下 载 HBuilder。 

(2) 新 建 一 个 手机 APP WH- 

点 击 “ 文 件 ” 一 “新 建 ” 一 “移动 APP” 或 者 直接 点 击 “ 新 建 移动 APP” 
(3) 设置 APP 名 称 以 及 选择 相应 模板 。 

(4) 编辑 相应 的 页 面 。 

(5) 调试 。 

(6) 利用 HBuilder 进行 打包 。 


12.2 HBuilder Webview 评 解 


通过 上 一 厄 的 讲解 相信 你 已 经 对 HBuilder 这 球 编 辑 费 有 了 一 定 了 解 ， 在 我 们 正式 制作 之 
前 我 们 需要 了 解 一 下 在 本 架 例 中 主要 用 到 的 HBuilder 中 的 Webview 模块 。Webview 模块 负责 
管理 应 用 窗口 界面 ， 实 现 各 个 页 面 之 间 的 跳 转 。 当 然 在 使 用 之 前 需要 通过 plus.Webview 获取 
应 用 界面 管理 对 象 。 在 这 里 的 plus 相当 于 Javascript 中 的 window 顶层 对 象 ， 然 后 每 个 页 面 其 
实 束 是 对 应 一 个 Webview 对 象 。 每 个 Webview 有 目 己 的 运行 环境 ， 各 个 Webview 之 间 不 会 干 
扰 。 接 下 来 我 们 介绍 本 模块 中 所 用 到 的 方法 。 

一 、Webview 方法 。 


1. 创建 新 的 Webview 窗口 
人 

说 明 : 

创建 Webview 窗口 ， 用 于 加 载 新 的 HIML 页 面 ， 可 通过 styles 设置 Webview 窗口 的 样 
式 ， 创 建 完 成 后 需要 调用 show 方法 才能 将 Webview 窗口 显示 出 来 。 

参数 : 

url: 可 选 ， 新 窗口 加 载 的 HTML 页 面 地 址 。 

新 打开 Webview 窗口 要 加 载 的 HTML 页 面 地 址 ， 可 支持 本 地 地 址 和 网 络 地 址 。 

id: 可 选 ， 新 窗口 的 唯一 标记 。 

口 标记 可 用 于 在 其 他 页 面 中 通过 getWebviewById 来 查找 指定 的 窗口 ， 为 了 保持 窗口 
标记 的 唯一 性 ， 不 要 使 用 相同 的 标记 来 创建 多 个 Webview 窗口 。 如 果 传 入 无 效 的 字符 串 则 使 
用 url 参数 作为 WebviewObject 窗口 的 id 值 。 

styles: 可 选 ， 创 建 Webview 窗口 的 样式 〈 如 窗口 宽 、 高 、 位 置 等 人 

extras: 可 选 ， 创 建 Webview 窗口 的 额外 扩展 参数 。 

值 为 JSON 类 型 ， 设 置 扩 展 参 数 后 可 以 直接 通过 Webview HA C.) 操作 符 获 取 扩 展 参 数 
属性 值 ， 如 : var w-plus.Webview.create('url. HTML, 'id', {}, {preload:"preload Webview"1); // 可 直 
接 通 过 以 下 方法 获取 preload 值 console.log(w.preload); // 输出 值 为 “preload Webview” 
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实例 : 

var head=plus.Webview.create("head.HTML","", {},1{}); 
2. a7 Webview 窗口 

Plus. Webviewoshow( 1d, show, durarion, Callback, extras J; 
说 明 : 
显示 已 创建 或 隐 基 的 Webview 窗口 ， 并 可 指定 显示 窗口 的 动画 及 动画 持续 时 间 。 
参数 : 


id: 必 选 ， 要 显示 Webview 窗口 id 或 窗口 对 象 。 

PRIF Webview 窗口 对 象 显示 ， 则 无 任何 效 来 。 使 用 窗口 这 时 ， 则 得 拷 对 应 id 的 窗口 ， 如 
条 有 多 个 相同 这 的 窗口 则 操作 了 最 先 创 建 的 窗口 ， 帮 没有 奏 找 到 对 应 id 的 WebviewObject 对 象 ， 
则 无 任何 效果 。 

show: 可 选 ， 显 示 Webview 窗口 的 动 男方 式 。 

如 果 没 有 指定 窗口 动画 类 型 ， 则 使 用 默认 值 “auto”， 即 目 动 选 择 上 一 次 显示 窗口 的 动 
国 效 果 ， 如 果 之 前 没有 显示 过 ， 则 使 用 “none” 动 男 效 果 。 

duration: 可 选 ， 显 示 Webview 窗口 动 男 的 持续 时 间 。 

单位 为 ms， 如 宋 没 有 设置 则 使 用 默认 窗口 动 男 时 间 600ms。 

callback: 可 选 ，Webview 窗口 显示 完成 的 回调 函数 。 

当 指 定 Webview 窗口 显示 动画 执行 完毕 时 触发 回调 函数 ， 窗 口 无 动画 效果 〈 如 "none" 动 
国 效 果 ) 时 也 会 触发 此 回调 函数 。 

extras: 可 选 ， 显 示 Webview 窗口 扩展 参数 。 

可 用 于 指定 Webview 窗口 动画 是 否 使 用 图 片 加 速 。 


3. 获取 当前 窗口 的 对 象 


C Wel ey Cobre ento CNS ore ww (Cs 


说 明 ， 获取 当前 窗口 的 对 象 。 
实例 ; 


var current=plus.Webview.currentWebview () ; 
—. WebviewObject 方法 
Webview 窗口 对 象 ， 用 于 操作 加 载 HTML 页 和 面 的 窗口 
1. 添加 事件 


obj .addEventListener (type, fn, Boolean) ; 


WH: [8] Webview f HOWIE, SRE SEPTA, CREUSE fn PISA © HY & 
次 调用 此 方法 辣 Webview WIE aram. RT AS ACHE INS, OR RS LES] 9G Js UY 
执行 。 
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参数 : 

type: Witt, Webview 窗口 事件 类 型 

fn: 必 选 ， 监 听 事 件 发 生 时 执行 的 回调 函数 
Boolean: 可 选 ， 捕 获 事件 流 顺 序 

实例 : 


document. cddhvyentlhustencwa(*olusready TunecElie 下 (下 <) 


2. E Webview 窗口 中 添加 子 窗口 
obj .append (son) 


说 明 : 在 当前 的 obj 窗口 中 插入 一 个 son 子 窗口 。 
实例 : 


var current-plus.Webview.currentWebview(); 

varheader-plus.Webview.create(" www/tpl/index head.HTML", "index header 
SEDIT wt me OO nemoihies ddp Top: 0 Left 0 roots mess red) 

obj.append (header); 


3. 显示 窗口 


obI.show( type, duration, Callback, extras ),) 


说 明 : 当 调 用 plus.Webview.create 方法 创建 Webview 窗口 后 ， 需 要 调用 show 方法 才能 显 
示 ， 同 时 可 设置 窗口 显示 动画 方式 及 动画 时 间 。Webview 窗口 被 隐藏 后 也 可 调用 此 方法 来 重 
3T ALN o 

参数 : 

type: 可 选 ，Webview 窗口 显示 动画 类 型 。 

如 果 没 有 指定 窗口 动画 类 型 ， 则 使 用 默认 值 “none”， 即 无 动画 。 

duration: 可 选 ，Webview 窗口 显示 动画 持续 时 间 。 

单位 为 ms， 默 认 使 用 动画 类 型 相对 应 的 默认 时 间 。 

callback: 可 选 ，Webview 窗口 显示 完成 的 回调 函数 。 

当 指 定 Webview 窗口 显示 动画 执行 完毕 时 触发 回调 函数 ， 窗 口 无 动画 效果 时 也 会 触发 此 
回调 函数 。 

extras: 可 选 ， 显 示 Webview 窗口 扩展 参数 。 

可 用 于 指定 Webview 窗口 动画 是 否 使 用 图 片 加速 。 

实例 : 


ODI chow (To l Trde Tn Eo 4 


12.3 新闻 APP 页 面 制作 


在 乙 前 的 两 节 中 我 们 已 经 介绍 了 本 和 草 开 发 用 到 的 开发 环境 CABuilder) 和 需要 用 到 的 
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口 界面 管理 (Webview) 模块 中 的 一 些 方法 。 本 节 ， 我 们 将 开始 进行 页 面 的 制作 。 

在 制作 页 面 之 前 我 们 先 来 提出 一 个 概念 : 多 窗口 报 术 。 它 类 似 于 我 们 HTML 中 的 帧 窗口 
技术 。 当 我 们 用 手机 访问 一 个 页 面 时 ， 由 于 各 种 原因 导致 我 们 的 页 面 无 法 快速 的 加 载 ， 这 时 
留 给 我 们 的 就 会 是 白 屏 ， 这 样 对 我 们 的 用 户 就 不 是 那么 的 友好 ， 那 么 应 该 如 何 解决 这 个 问题 
呢 ? 大 家 来 想 我 们 是 不 是 可 以 用 好 多 个 页 面 来 组 合成 一 个 页 面 呢 ? 将 一 个 页 面 拆 分 成 若干 页 
面 ， 然 后 将 其 中 的 一 些 页 面 放 在 的 APP 包 中 ， 一 些 页 面 放 在 服务 器 上 ， 这 样 再 访问 页 面 的 
话 ， 在 包 中 的 部 分 能 够 很 快速 地 加 载 出 来 ， 然 后 服务 右上 的 页 面 进行 加 载 ， 这 样 的 话 ， 页 面 
中 也 会 显示 部 分 内 容 ， 就 可 以 避免 之 前 提 到 的 那 种 情况 。 接 下 来 ， 我 们 开始 制作 新 闻 APP. 

1. 新 建新 闻 APP 

月 动 HBuilder: 

在 荣 单 栏 中 选择 “文件 ”一 “新 建 ” 一 “移动 APP” CHEE (Ctrl+N)), HIF “EAE 
移动 APP” 对 话 框 ， 在 应 用 名 称 中 输入 APP 名 称 ， 选 择 模板 “mnui 项 目 ”。 该 模板 中 包含 一 
些 文件 。 有 我 们 最 熟悉 的 index.html，css，js$，font。 另 外 我 们 还 能 够 看 见 其 他 两 个 文件 ， 
manifest.json 这 个 文件 可 以 帮助 我 们 配置 大 量 的 信息 ， 比 如 APP 的 名 称 、APPid、 版 本 号 和 
页 面 入 口 等 ;unpackage 文件 则 是 为 了 集中 管理 项 目的 相关 资源 ， 我 们 在 开发 时 可 以 放 一 下 
文件 (比如 logo， 闪 屏 页 )， 以 便 打 包 的 时 候 使 用 ， 本 质 上 和 系统 的 任何 一 个 文件 夹 没什么 
区 别 。 

2. 页 面 制作 Cindex.html) 

我 们 利用 上 面 说 到 的 多 窗口 拉 术 来 实现 ， 我 们 先 在 项 目下 面 新 建 一 个 文件 夹 tpl 来 存放 
我 们 要 用 到 的 页 面 ， 在 该 文件 夹 下 面 我 们 新 建 几 个 子 页 面 : index_head.html, index 
content.html。 在 下 面 的 布局 中 我 们 可 能 会 用 到 HBuilder 给 我 们 定义 好 的 样式 让 我 们 快速 的 实 
现 页 面 布局 。 


oe >< (o Lo da eru 
首页 头 部 布局 : 


«header class="mui-bar mul-bar-nmnav'- 


«a class="mui-icon-contact mui-icon mui-pull-left"»«/a» 

«hl class="mui-title">NEWAPP</h1> 

<a Class "mi Icon bars mul icon mui Pull righi 7a- 
</header> 


AR ON S| 12-1 BAAN e 
@ NEWAPP = 
图 12-1 
index content .html 


首页 内 容 的 布局 ， 此 处 是 导航 。 
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<div cla F Topi 
«a ror "EI a 
«a e R a 
<a uw Ni 
<a hrel Ta 
=) ching 


效果 如 图 12-2 所 示 。 


国内 新 闻 ”国际 新 闻 ”人 文 地 理 “社会 科学 


图 12-2 


此 处 是 一 个 轮 播 图 。 


<cliy class=" mui=slider" > 


“dy elass mur Lave Sie Groupi- 


«div class="mui-slider-item"><a href="#"><img src="../img/2.jpg"/> 
«Uf osse Cla 
<div Class—"mui—slider—item ><a Meer—" "><img Sre—"22/1mdg/ 3 gg 
<a) Gay > 
«div class="mui-slider-item"><a href="#"><img src-"../img/4.jpg"/» 
cg /ov 
«div  class-"mui-slider-item"»«a  href-"f"»«img  srcz"../img/5.jpg"/» 
xU BU elc 
«QUU 
«i Gb 


BRUNA 12-3 所 示 。 


此 处 是 一 个 列表 。 


<ul class="mui-table-view ul"> 


<li classs"mui-table-view-cell mui-media"> 
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<a href="Javascript:;"> 
<img class—"mui—media—-obj ect mui pull left sre—"2./img/4.j)e0q"> 
<div class="mui-media-body"> 
<p class='mui-ellipsis'> 能 和 心爱 的 人 一 起 睡觉 ， 是 件 羊 福 的 事情 ;可 是 ， 打 呼噜 怎么 


Tp? </p> 
<<) clas 
ae 
«bs 
«1-- 此 处 可 进行 复制 --> 
«mus 


效果 如 图 12-4 所 示 。 


本 幸福 
BR. 能 和 心爱 的 人 一 起 睡觉， 是 件 幸福 的 事情 ; 可 是 ， 打 呼唤 
T] <= 
BE 起 要 这 样 一 间 小 木屋 ,夏天 挫 冰 吃 瓜 ， 冬 天 转炉 取暖 
== CBD 
烤 炉 模式 的 城 ， 到 黄昏 ， 如 同 打 翻 的 调 色 盘 一 般 
图 12-4 
index sem 
日 ES Hr NEN RA 
此 处 是 一 张 带 有 进度 条 的 图 片 。 
ee mel cu mp I el el 0 tied ome: a oe 


Ol tee: Up borton: OF marci sale to /> 


接 下 来 我 们 只 需要 将 它 的 两 个 子 页 面 引 入 即 可 。 用 类 似 的 方法 我 们 同样 可 以 实现 列表 页 
(list.htmD 和 内 容 页 Cshow.html) 的 布局 。 


结合 HBuilder 实现 新 闻 APP 


12.4.1 调用 Webview 模块 


通过 前 面 的 章节 我 们 已 经 基 本 实现 了 APP 静态 页 面 的 制作 ， 本 节 我 们 将 利用 Webview 
来 实现 各 个 页 面 之 间 的 跳 转 。 在 正 陈 实现 之 前 ， 我 们 把 上 一 第 留 下 的 一 些 问题 解决 择 : 我 们 
如 何 将 写 好 的 index head.html, index content.html 插入 到 我 们 的 首页 (index.html)。 接 下 
来 ， 我 们 看 代码 部 分 。 


1. 静态 页 面 的 完 责 


ume 
第 一 步 : 我 们 执行 的 一 切 操作 必须 要 等 页 面 所 有 的 资源 加 载 完成 后 才 行 ， 所 以 我 们 先 给 
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文档 添加 一 个 “plusready” 事 件 。 
document addeventhietener("pluUsreadyvy x Tunciion() | sc tc a) } 
第 二 步 : Mp H SE Zu RIJ index head.html 和 index content.html 插入 到 
index.html 中 , 
首先 我 们 在 index.html 中 获取 当前 窗口 的 Webview XJ 2. 


var obj-plus.Webview.currentWebview(); 


然后 我 们 创建 index head.html 页 面 对 象 。 


var header-plus.Webview.create(" www/tpl/index head.HTML","index header. 
EM al ne O0 ee ht A oD Oe 0 en on tee 


最 后 我 们 将 创建 出 来 的 头 部 窗口 插入 到 index.html 页 面 中 。 

obj.append (header); 

接 下 来 我 们 利用 相同 的 方法 将 index contenthtml 插入 到 index.html 中 ， 在 这 里 我 们 需 
要 注意 的 是 index content html 是 放 在 服务 器 上 的 ， 因 此 我 们 不 知道 该 页 面 什么 时 候 可 以 加 
载 完 成 ， 所 以 在 此 处 我 们 需要 在 页 面 未 加 载 完 成 之 前 有 一 个 提示 。 

我 们 创建 index content.html 页 面 对 象 的 代码 如 下 。 


ee Solus lr Eee ml me me 
有 


接 下 来 ， 我 们 分 别 添加 Webview 窗口 页 面 开 始 加 载 事 件 和 Webview 窗口 页 面 加 载 完成 
事件 。 


content.addEventListener ("loading", function () { 
SY ne CSS (ola enselen 
}, false) 
content.addEventListener ("loaded", function () { 
ODJ APFend (Content); 
(me (ea ne 
}, false) 


用 类 似 的 方法 我 们 来 实现 列表 页 Clist-html) 和 内 容 页 Cshow.html) 的 布局 ， 到 此 为 
止 ， 我 们 才 将 所 有 的 静态 页 面 芮 正 的 布局 完毕 。 接 下 来 我 们 来 实现 页 面 乙 间 的 跳 园 。 

2. 页 面 跳 转 

有 的 读者 或 许 已 经 友 现 在 我 们 的 页 面 布局 中 ， 我 们 将 所 有 的 链接 标签 (a) 的 链接 功能 
给 屏蔽 挥 了 ， 那 我 们 如 何 实现 页 面 之 间 的 跳 转 呢 ? 在 HBuilder 的 Webview 模块 中 是 否 给 我 们 
提供 了 相应 的 方法 呢 ?” 答 案 是 肯定 的 ， 现 在 回想 一 下 我 们 是 如 何 让 index_head.html 和 
index content.html 在 首页 里 面 显示 的 呢 ? 下 面 我 们 用 同样 的 思路 来 实现 页 面 之 间 的 跳 转 : 我 
们 点 击 相应 的 链接 ， 首 先 创建 相应 的 窗口 对 象 ， 然 后 我 们 再 利用 show 方法 让 页 面 以 不 同 的 
动画 方式 出 现 即 可 。 接 下 来 我 们 看 代码 实现 。 
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Que crece ms M 
第 一 步 : 先 给 文档 添加 一 个 “plusready” 事 件 


document.addEventListener ("plusready", function(){ ***** }) 


第 二 步 : ATE AA DY EELS PIT DY SUT, BAM OR SO DV Ge SUA, PIG 
RIE SC ETE BRE PES AS SF 


$(".top a") .click (function () { 
当 我 们 点 击 时 ， 创 建 相应 的 窗口 对 象 : 
var header-plus.Webview.create ("list.HTML",""); 
创建 出 相应 的 窗口 对 象 之 后 ， 我 们 利用 show 方法 让 页 面 以 不 同 的 动画 方式 出 现 : 


header. show("slide -in rIght"); 


}) 
PRS BAT BC PY ZEN BERT DY IGS OU TEL : 


$5 m -ul LLWY Ped c CO { 


var show=plus.Webview.create("show. HTML", "Show.HTML") ; 


show. enow("el ilide qms bt 


}) 
利用 相同 的 方法 来 实现 其 他 地 方 的 页 和 面 跳 转 功 能 。 


12.4.2. 利用 HBuilder 打包 


接 下 来 ， 我 们 进行 APP 开 友 的 最 后 一 个 环 帮 ， 利 用 HBuilder 进行 APP HE. 

1. 概述 

我 们 在 将 APP 打包 之 前 需要 配置 APP 的 一 些 基 本 信息 。manifestjson 文件 是 APP 的 配置 
文件 ， 用 于 指定 应 用 名 称 、 版 本 、 图 标 、 页 面 入 口 、 启 动 图 标 及 需要 使 用 的 设备 权限 等 信息 ， 
用 户 可 通过 HBuilder 的 可 视 化 界 面 视图 或 者 源码 视图 来 配置 移动 APP 的 信息 。 

2. 应 用 基本 信息 配置 

在 HBuilder 中 创建 “移动 APP” 应 用 后 ， 都 会 在 工程 下 生成 manifest.json 文件 ， 在 “项 
目 管 理 器 ”中 双击 即 可 打开 ， 如 图 12-5 所 示 。 


E rq new 
css 


fonts 
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HBuilder 设置 非常 的 人 性 化 ，HBuilder 打开 manifest.json 文件 后 ， 默 认 显示 “可 视 化 


图 ”可 配置 应 用 的 基本 信息 ， 如 图 12-6 所 示 。 


也 可 以 扣 击 窗口 感 部 的 “代码 视图 ”切换 到 代码 视图 ， 进 行 基本 信息 的 配置 。 


应 用 信息 manifest HEE 


it : manifest X 82 RETAN SUI ASSI, SRD EB 不 ,其 他 部 分 需要 通过 App 打 包 才 可 看 到 效果 


-基本 信息 
whem a | 
ESS: |10 0 0 0 0 0 0000 | 


[7] debug 模 式 (android 是 否 支 持 日 志 边 出 及 chrome 调 试 ) 


应 用 资源 星 否 解压”@ 不 解压 直接 运行 © 解 庄 资源 后 运行 
-根据 重力 感应 自动 横竖 屏 


Moca 


portrait upside down landscape left landscape right 


应 用 信息 | 图 标 配置 | 启动 图 片 (splash) 配 置 | SDK 配 置 模块 权限 配置 | 代码 视图 
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AAA on 12-7 所 示 。 


$] manifestjson 58 


3 i 


4 "name": "new",/* 应 用 名 称 ， 程序 桌面 图 标 名 称 */ 
5: "version": { 

6 | | "name": "1.9",/* 应 用 版 本 名 称 */ 

7 SCOdB shan 

8 n 

9 | "description": "",/* 应 用 描述 信息 */ 

107: "icons": { 

TT "72": "icon.png" 

12 } 

13 "launch path": “index-html”,/* 应 用 的 六 口 页 面 ， 默 认为 根 目 录 下 的 index.htm1; 支持 网 络 地 址 ， 必 须 以 http:// 或 https:// 开 头 */ 
1451 "developer": { 

15 "name": "",/* 开 发 者 名 称 */ 


pretforms": ["android", "iPhone", "iPad"] 


"id": “",/* 应 用 的 标识 ,创建 应 用 时 自动 生成 ， 为 手动 修改 */ 


"email": "",/* 开 发 者 邮箱 地 址 */ 
"url": ""/* 开 发 者 个 人 主页 地 址 */ 


205) “Accelerometer”: 

210 "description": "访问 加 速度 感应 器 " 
22 | R 

235; "Audio": { 

24 | i "description": "访问 麦克 风 " 

25 » 

268. “Messaging”: { 

27 | | o0 "description": " 短 彩 邮件 插件 ” 

28 . ons 

293: "Cache": { 

30 | : "description": "BIEN ARE" 

31 | }, 

325: "Camera": { 

33 : "description": “访问 摄像 头 " 

34 | hn 

358: "Console": { 

36 | "description": "跟踪 调试 输出 日 志 " 


i 
o 应 用 信息 | 图 标 配置 | 启动 图 片 (splash) 配 置 |SDK 配 置 | 模块 权限 配置 | 代码 视图 


12-7 


3. 应 用 信息 


应 用 信息 包括 应 用 的 名 称 、appid、 页 面 入 口 、 版 本 信息 等 。 
应 用 名 称 : APP 安装 后 在 手机 时 面 上 的 快捷 方式 名 称 。 
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appid: HBuilder appid《〈 应 用 标识 )， 在 创建 时 分 配 的 ， 不 可 改 的 标识 ， 可 以 从 云端 进行 
获取 。 
版 本 写 : 即 应 用 的 版 本 号 ， 用 户 可 通过 plus API Cplus.runtime.version). 获取 应 用 的 版 本 
写 ， 需 提交 APP 云端 打包 后 才能 生效 。 
入 口 页 面 : 应 用 局 动 后 显示 的 首页 即 入 口 页 面 ， 默 认为 根 目录 下 的 index.html; 同样 文 
持 网 络 地 址 ， 必 须 是 以 http:// 或 者 是 https:/ 开 头 的 。 
代码 视图 如 图 12-8 所 示 。 
$] manifestjson 23 


2 Lise ["android", "iPhone", "iPad"], 

3 "id": “",/* 应 用 的 标识 ， 创建 应 用 时 自动 生成 匆 手 动 修改 */ 
4 es “new" ,/* 应 用 和 名称， 程序 桌面 图 标 名 称 */ 

5E ee NN 1. 

6 "name": “1.9”,/* 应 用 版 本 名 称 */ 

7 SCOURS San 

8 f> 

9 "description": "",/* 应 用 描述 信息 */ 

105 Icons»: A 

11 "72": "icon.png" 

1271 [s 

13 "launch path": “index.html",/* 应 用 的 六 口 页 面 ， 默 认为 根 目录 下 的 index.html; 支持 网 络 地 址 ， 必 须 以 http:// 或 https:// 开 头 */ 
145 "developer": { 

15 "name": "",/* 开 发 者 名 称 */ 

16 "email": "",/* 开 发 者 邮箱 地 址 */ 

17 "url": “"/* 开 发 者 个 人 主页 地 址 */ 
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4. 重力 感应 

根据 重力 感应 目 动 横竖 屏 显 示 。 可 以 点 击 选择 相应 的 按钮 表示 设备 文 持 对 应 的 旋转 方 
回 。 重 力 选 择 按 钮 可 以 选择 一 个 或 者 多 个 ， 选 择 多 个 方 各 后， 应 用 根据 重力 感应 按照 指定 的 
方向 显示 页 面 ， 如 网 12-9 所 示 ， 选 中 其 中 的 按钮 ， 表 示 可 以 文 持 四 个 方 癌 显示 页 面 内 容 。 


TST Sa Ree 
[V] portrait | upside down [V] landscape left [V] landscape right 


图 12-9 


代码 视图 如 图 12-10 所 示 。 
根据 重力 感应 日 动 横竖 屏 在 plus 一 distribute 一 orientation 下 进行 配置 : 


"orientation": ["portrait-primary","portrait-secondary"^,"landscape-primary"^,"landscape-secondary"], 


/* 应 用 支持 的 方向 ，portrait-primary: 坚 屏 正方 向 ! portrait-secondary: C BER IS; 
: landscape-primary: 模 屏 正方 同 ; * landscape-secondary: RR 7[*/ 


图 12-10 


5. 图 标 配 置 和 启动 图 标 配 置 
图 标 配 置 如 图 12-11 Aras. 
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目 动 生成 所 有 适用 图 标 
选择 源 图 片 : 选 泽 一 个 大 图 标 ,将 会 自动 压缩 生成 各 种 小 图 标 


推荐 180*180 以 上 的 正方 形 图 形 
远 控 图标 保存 路 径 ; | unpackage/res/icons | 
生成 各 种 分 关 记 图 标 ORRE REIS MEN PARSER 


iPhone EHR 
29°29 58°58 87°87 80°80 57°57 114*114 120*120 180*180 
12-11 


代码 视图 如 图 12-12 Bro. 
(1) iOS 平台 。1iOS 平台 应 用 图 标 配 置 在 plus—distribute—icons—ios 下 进行 配置 : 


"icons": { 
"dos": f 
| — "prerendered": true，/* 应 用 图 标 是 否 已 经 高 之 处 理 ， 在 1056 及 以 下 设备 上 有 效 */ 
"auto": ""，/* 应 用 图 标 ， ARE: 512x512 ， 用 于 自动 生成 各 种 尺寸 程序 图 标 */ 
"iphone": { 
SNOPMALT Com. /*iPhone3/3GS 程 序 图 标 ， 分辩 率 : 57x57*/ 
"retina": ""，/*iPhone4 程 序 图 标 ， 分辨 率 : 114x114*/ 
| "retina7": ""，/*iPhone4S/5/6 程 序 图 标 , DIRE: 120x120*/ 
"retina8": "", /*iPhone6 Plus 程序 图 标 os: 180x180*/ 
| | |  "spotlight-normal": "", /*iPhone3/3GS Spotlight 搜 索 程序 图 标 , DIE: 29x29*/ 
"spotlight-retina": "", /*iPhone4 Spotlight 搜 索 程序 图 标 ，, DIFE: 58x58*/ 
"spotlight-retina7": "", /*iPhone4S/5/6 Spotlight 搜 索 程序 图 标 ， 分 辩 率 : 80x80*/ 
"settings-normal": ""，/*iphone4 设 置 页 面 程序 图 标 ， 分 状 率 : 29x29*/ 
- - "settings-retina": ""，/*iPhone45/5/6 设 置 页 向 程序 图 标 ,， DIRE: 58x58*/ 
"settings-retina8": "”/*iPhone6Plus 设 置 页 面 程序 图 标 ， 2 PE: 87x87*/ 
| | b 


"normal": "", /*iPadifj8 RSA Bin, 分 辨 率 : 72x72*/ 

"retina": "”，/*ipad 高 分 屏 程 序 图 标 FF: 144x144*/ 

"normal7": "", /*iPad i057 程 序 图 标 ， 分 辨 率 : 76x76*/ 

"retina7": "", /*iPad i057 高 分 屏 程 序 图 标 , MRE: 152x152*/ 
"spotlight-normal": "", /*iPad Spotlight! REFE. DIFE: 50x50*/ 
"spotlight-retina": ""，/*iPad 高 分 屏 Spotlight 搜 索 程序 图 标 ， 分辨 率 : 100x100*/ 
"spotlight-normal7": "",/*iPad i0S7 Spotlight RETE. DFPE: 40x40*/ 
"spotlight-retina7": "",/*iPad i057 高 分 屏 Spotlight 搜 索 程 序 图 标 ， 分辨 率 : 80x80*/ 
"settings-normal": ""”,/*ipad 设 置 页 面 程序 图 标 MIRE: 29x29*/ 
"settings-retina": "”/*ipad 高 分 屏 设置 页 面 程序 图 标 ， 分 辨 率 : 58x58*/ 


12-12 


(2) Android 平台 。 如 图 12-13 Prax, Android 平台 应 用 图 标 配 置 在 plus distribute 
icons 一 android 下 进行 配置 : 


"android": { 

| Umdpi": ""，/* 普 通 屏 启 动 图 片 ， 分辨 率 : 240x282*/ 
"ldpi": ""”，/* 太 屏 启动 图 片 ， 分 辨 率 : 320x442*/ 

"hdpi": ""”，/* 高 分 屏 启 动 图 片 ， 分 辨 率 : 480x762*/ 
"xhdpi": ""”，/*726P 高 分 屏 启 动 图 片 DIRE: 720x1242*/ 
"xxhdpi": ""/*1888P 高 分 屏 启动 图 片 ， 分辩 率 : 1080x1882*/ 
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新 闻 APP 
司 动 图 片 配 置 代 码 视图 如 图 12-14 所 示 。 


启动 图 片 (splash) 配 置 
启动 选项 
& 自动 关闭 局 动 界面 © REDDE 下 对 | 2w © 手动 关闭 启动 界 画 


[9i ean ERES 
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(1) iOS ^F. &. iOS 平台 应 用 局 动 图 片 配 置 项 在 plus distribute splashscreen^ ios 下 进 
行 配 置 ， 如 图 12-15 Dra: 


"splashscreen": { 
: "ios": { 

"iphone": { 

| — "default": ""，/*iPhone3 启 动 图 片 选 ， FE: 320x480*/ 

"retina35": "",/*3.5 英 寸 设备 (iPhone4) 启 动 图 片 ， MIFE: 640x960*/ 
"retina40": "",/*4.0 英寸 设备 (iPhone5/iPhone5s) 启 动 图 片 ， 分 辨 率 : 640x1136*/ 
"retina47": "",/*4.7 英寸 设备 (iPhone6) 启 动 图 片 ， FRR: 750x1334*/ 
"retina55": "",/*5.5 英寸 设备 (iPhone6 Plus) 启 动 图 片 ， 分辩 率 : 1242x2208*/ 
"retina551": ""/*5.5 英寸 设备 (iPhone6 Plus) 横 屏 启 动 图 片 ， 分辨 率 : 2208x1242*/ 


To 
"ipad": { 

"portrait": "", /*iPadERRSIRA, SFPE: 768x1004*/ 

"portrait-retina": ""”,/*ipad 高 分 屏 坚 屏 图 片 分辨 率 : 1536x2008*/ 
"landscape": "", /*iPad RADER, TIRE: 1024x748*/ 
"landscape-retina": ""，/*iPad 高 分 屏 模 屏 启动 图 片 ， 分 辨 率 : 2048x1496*/ 
"portrait7": "", /*iPad i0S7 坚 屏 启动 图 片 ， 分 辩 率 : 768x1024*/ 
"portrait-retina7": "",/*iPad i087 BUEBHEIE , DFE: 1536x2048*/ 
"landscape7": "", /*iPad i057 楷 屏 启 动 图 片 51383: 1024x768*/ 
"landscape-retina7": ""/*iPad i0S7 高 分 屏 楷 屏 启动 图 片 分辨 率 : 2048x1536*/ 


» 
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(2) Android F. Android 平台 应 用 启动 图 片 配置 项 在 plus— distribute splashscreen— 
android 下 进行 配置 ， 如 图 12-16 所 示 : 


"android": { 

|o Umdpi": ""，/* 普 通 屏 启动 图 片 ， 分 辨 率 : 240x282*/ 
"ldpi": ""”，y/* 太 屏 启动 图 片 ， 分 辨 率 : 320x442*/ 

"hdpi": ""，/* 高 分 屏 启 动 图 片 ， APER: 480x762*/ 
"xhdpi": ""，/*728P 高 分 屏 启动 图 片 ， 分 辨 率 : 720x1242*/ 
"xxhdpi": ""/*1886P 高 分 屏 启动 图 片 ， 分 辨 率 : 1080x1882*/ 
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6. SDK 配置 和 模块 权限 限制 

在 应 用 中 如 需要 使 用 地 图 、 登 录 鉴 权 、 文 付 、 推 送 、 分 娃 、 统 计 ， 则 需要 在 打包 时 选择 
使 用 第 三 方 插件 ， 并 填写 相关 配置 信息 。 并 对 某 些 模块 进行 权限 设置 。 

T. 云端 打包 

配置 了 这 么 多 之 后 ， 终 于 可 以 开始 打包 了 。HBuilder 默认 是 在 云端 打包 的 ， 也 就 是 需要 
将 你 的 代码 进行 提交 ， 然 后 进行 打包 ， 打 包 完 成 之 后 下 载 打 好 的 包 ， 这 样 的 话 不 管 你 的 电脑 
配置 如 何 ， 只 要 网 速 民 好 束 可 以 很 快 地 打包 完毕 ， 当 然 你 也 可 以 进行 本 地 打包 ， 那 样 就 需要 
Android 环境 和 iOS 环境 ， 不 推荐 。 

其 体 的 选择 : 

(1) 选择 平台 : 选择 Android 或 10S， 或 者 两 者 都 有 。 

(2) 选择 证 书 : 如 末 只 是 目 己 玩 可 以 选择 公用 证 书 ， 但 是 这 样 不 能 发 到 线 上 ， 如 果 要 友 
布 到 线 上 需要 自己 申请 Google 和 Apple 的 证 书 。 

(3) AGNE: 点 击 打包 ， 系 统 会 显示 进度 ， 当 打包 完成 后 会 目 动 下 载 到 本 地 ， 打 开 包 
所 在 文件 夹 束 可 以 使 用 APP T. 
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在 HTMLS 中 ， 当 请 求 一 个 位 置信 息 时 ， 如 果 用 户 同 意 ， 浏 览 嚣 束 会 返回 位 置信 息 ， 而 
该 位 置信 息 是 通过 文 持 地 理 定位 功能 的 底层 设备 (如 笔记 本 电脑 、 手 机 〉 提 供给 浏览 器 的 。 
位 置信 息 由 纬度 、 经 度 坐 标 和 一 些 其 他 元 数据 组 成 。 例 如 法 国 巴 歼 的 位 置信 息 主要 由 一 对 纬 
度 和 经 度 坐 标 组 成 : 北纬 42”51'36"， 东 经 2” 2024". 

经 纬度 坐标 有 两 种 表示 方式 : 十 进 制 格式 (例如 39.9) 和 DMS (Degree Minute 
Second, HE) 格式 (例如 39° 54'20"). HTMLS Geolocation API 返 回 的 坐标 格式 为 十 进 制 
格式 。 除 了 纬度 和 经 度 坐 标 ，HTML5 Geolocation 还 提供 位 置 坐标 的 准确 度 。 此 外 ， 它 还 会 
提供 其 他 一 些 元 数据 ， 比 如 海拔 、 海 拔 准确 度 、 行 驱 方 向 和 速度 等 ， 具 体 情 况 取 决 于 浏览 峰 


所 在 的 便 件 设备 。 
位 置信 息 一 般 从 如 下 数据 源 获 得 : 
e IP 地 址 ; 


e 三 维 坐 标 : GPS (Global Positioning System， 全 球 定 位 系统 )、Wi-Fi、 手 机 信号; 

e 用 户 目 定义 数据 。 

它们 各 有 优 和 缺点 ， 为 了 保证 更 高 的 准确 度 ， 许 多 设备 使 用 多 个 数据 源 组 合 的 方式 ， 如 
表 13-1 所 示 。 


表 13-1 
IP 地 址 任何 地 方 都 可 用 在 服务 器 端 处 理 不 精确 (经 常 出 错 ， 一 般 只 能 精确 到 城市 级 ) ,运算 代价 大 
GPS 定位 时 间 长 ， 耗 电量 大 ,室内 效果 差 ,需要 额外 便 件 设备 文 持 
Wi-Fi 精确 ,可 在 室内 使 用 ,简单 、 快 捷 在 乡村 之 类 Wi-Fi. 接 入 点 少 的 地 区 无 法 使 用 
手机 信和 号 相当 准确 ,可 在 室内 使 用 ,简单 、 快 捷 需要 能 够 访问 手机 或 其 modem 设备 
用 户 目 定义 用 户 目 行 输入 可 能 比 目 动 检 测 更 快 可 能 很 不 准确 ， 特 别 是 当 用 户 位 置 变 更 后 


13.2 ”浏览 器 支持 情 ) 


各 浏览 右 对 HIMLS Geolocation 的 文 持 程度 不 同 ， 并 有 是 还 在 不 断 更 独 中 。 好 消 明 是 在 
HTMLS 的 所 有 功能 中 ，HTML5 Geolocation 是 第 一 批 被 全 部 接受 和 实现 的 功能 之 一 ， 相 关 规 
范 已 经 达到 一 个 非常 成 熟 的 阶段 ， 不 会 再 做 太 大 改变 。 

由 于 浏览 句 对 它 的 文 持 程 度 不 同 ， 在 使 用 之 前 最 好 先 检 查 浏览 右 是 合 文 持 HIML5 
Geolocation API。 后 面 将 讲解 如 何 检查 浏览 喜 是 人 否 文 持 此 功能 。 本 书 中 所 有 示例 程序 都 已 
TE Firefox 上 运行 测试 成 功 ， 如 表 13-2 Arar. 


180 


地 理 位 置 定 位 
A 13-2 
浏 览 器 x TR UL 

Firefox 3.5 及 以 上 版 本 支持 
Chrome 在 带 有 Gears 的 第 2 版 Chrome 中 被 支持 

Internet Explorer 通过 Gears 插件 支持 
Opera 在 版 本 10 中 支持 
Safari 在 版 本 4 中 支持 以 实现 在 iPhone 上 可 用 


13.3 ”隐私 


HTMLS Geolocation 规范 提供 了 一 套 保护 用 户 隐私 的 机 制 。 必 须 先 得 到 用 户 的 明确 许 


可 ， 才 能 获取 用 户 的 位 置信 息 。 不 过 ， 从 可 接触 到 的 HTML5 Geolocation 应 用 程序 示例 中 可 
以 看 到 ， 开 发 者 通常 会 鼓励 用 户 共 享 这 些 信息 。 例 如 ， 午 餐 时 间 到 了 ， 如 果 应 用 程序 可 以 让 
用 户 知道 附近 和 餐馆 的 特色 荣 及 其 价格 和 评论 ， 那 么 用 户 就 会 觉得 共享 他 们 的 位 置信 息 是 可 以 
接受 的 。 

因为 位 置 数据 属于 敏感 信息 ， 所 以 接收 到 之 后 ， 必 须 小 心地 处 理 、 存 储 和 重 传 。 如 果 用 
户 没 有 授权 存储 这 些 数据 ， 那 么 应 用 程序 应 该 在 相应 任务 完成 后 立即 删除 它 。 如 果 要 重 传 位 
置 数据 ， 建 议 对 其 进行 加 密 。 


13.4 HTMLS Geolocation API 


本 节 将 详细 介绍 HTMLS Geolocation API 的 使 用 方法 。 

在 调用 HIML5 Geolocation API 函 数 前 ， 需 要 确保 浏览 右 文 持 此 功能 。 当 浏览 吉 不 文 持 
时 ， 可 以 提供 一 些 替 代 文 本 ， 以 提示 用 户 升级 浏览 器 或 安装 插件 〈 如 Gears) 来 增强 现 有 浏 
a] AE o 

检查 浏览 器 文 持 性 ， 代 码 如 下 : 


Toe om el oN 


If (naviga or geo locaton) 4 
document .gerthlementByld(" support”) inner HIML = "ox 持 HTML5 
Geolocatione "; 
pee lse | 
document.getElementById("support").innerHTML = 
"IAM Mae D sce} HTML5 Geolocation ! 建议 升级 浏览 器 或 安装 插件 (如 Gears). "; 
} 
} 


fF HTMLS Geolocation 功能 中 ， 位 置 请 求 有 两 种 : 
e 单 次 定位 请 求 ; 
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e 重复 性 位 置 更 新 请 求 
单 次 位 置 请 求 ， 在 许多 应 用 中 ， 只 检索 或 请 求 一 次 用 户 位 置 即 可 ， 例 如 前 面 提 到 的 午餐 
时 间 到 了 ， 要 查询 用 户 附 近 餐 馆 的 特色 菜 及 其 价格 和 评论 ， 
单 次 定位 请 求 API， 代 码 如 下 。 


JeeCurrenePostevon(uedarelhocatuon, optional handlelogcationError, 


optriona l oerons f 


XA pK EE ESAM PY SY EAL. IE BL updateLocation 为 浏览 器 指明 位 
置 数据 可 用 时 应 调用 的 函数 。 获 取 位 置 操 作 可 能 需要 较 长 时 间 才 能 完成 ， 用 户 不 希望 在 检索 
位 置 时 浏览 右 被 锁定 ， 这 个 参数 就 是 异步 收 到 实际 位 置信 息 后 ， 进 行 数据 处 理 的 地 方 。 乞 同 
时 作为 一 个 函数 ， 只 接收 一 个 参数 : 位 置 对 象 position。 这 个 对 和 象 包含 坐标 (coords) 和 一 个 
获取 位 置 数据 时 的 时 间 戳 ， 许 多 重要 的 位 置 数据 都 包含 在 coords 中， 比如: 

e latitude (纬度 ); 

€ longitude (4/2); 

€ accuracy (HEAR). 

Ze Jo Eq], XSA A pi ERAN i BACHE. latitude 和 longitude 包含 HTMLS 
Geolocation 服务 测定 的 十 进 制 用 户 位 置 。accuracy 以 m 为 单位 制定 纬度 和 经 度 值 与 实际 位 置 
间 的 差距 。 局 限于 HTML5 Geolocation 的 实现 方式 ， 位 置 只 能 是 粗略 的 近似 值 。 在 呈现 返回 
值 前 请 一 定 要 检查 返回 值 的 准确 上 度 。 如 果 推 存 的 所 谓 “ 附 近 的 ”和 餐馆， 实际 上 要 耗 忱 用 户 几 
个 小 时 的 路 程 ， 那 孢 不 好 了 。 

坐标 可 能 还 包含 其 他 一 些 数据 ， 不 能 保证 浏览 器 对 其 都 文 持 ， 如 果 不 支 持 则 返回 null. 

€ altitude: 海拔 高 度 ， 以 m 为 单位 ; 

€ altitudeAccuracy: 海拔 高 度 的 准确 度 ， 以 mm 为 单位 ; 

€ heading: 行进 方向 ， 相 对 于 正 北 而 言 ; 

@ speed: 速度， 以 m/s 为 单位 。 

updateLocation() 函数 使 用 示例 代码 如 下 。 


EUneiongueaaeeoeaenhoneaosnmenonm s 
We 
var longi cude oot on coor de longitude: 


var accuracy — Posion. coords. accuracy: 


document oae rE e mene a a e a = laticude- 

document en 

document .getElementByld ("E/E") .innerHTML = accuracy + "XK"; 
} 


可 选 参数 handleLocationError W 20| W Arte 9] Ha rt RE ER PR S [LET A lH OK P] eA 2 — 28 
NAPA BRAM, IN, Bee PS ACP HEP A PARE. AARE, AP AE 
义 了 所 有 需要 处 理 的 错误 情况 的 错误 编号 。 错 误 编 号 code 设置 在 错误 对 象 中 ， 错 误 对 象 作为 
error 参数 传递 给 错误 处 理 程 序 。 这 些 错 误 编 号 包括 以 下 内 容 

@ UNKNOWN ERROR (0): 不 包括 在 其 他 错误 编号 中 的 错误 ， 需 要 通过 message 参数 
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Er fein RA HAW a s 
€ PERMISSION DENIED (1): 用 户 拒绝 浏览 器 获得 其 位 置信 息 ; 
e POSITION UNVAILABLE (2): 尝试 获取 用 户 信息 失败 
€ TIMEOUT " 在 options 对 象 中 设置 了 timeout 值 ， 尝 试 获取 用 户 位 置 超时 。 
在 这 些 情况 下 ， 您 可 以 通知 用 户 应 用 程序 运行 出 了 什么 问题 。 
错误 处 理 函 数 代码 如 下 。 


function handleLocationError(error) { 


switch (error.code) { 
case 0: 
updateStatus ("党 试 获取 您 的 位 置信 息 时 发 生 错 误 : " + error.message); 


break; 


case 1: 
updateStatus ("用 户 拒绝 了 获取 位 置信 息 请 求 。") 


break; 


case 2: 

updateStatus (" 浏 览 囊 无 法 获取 您 的 位 置信 息 。") ; 
break; 

Case 3: 

updateStatus ("获取 您 位 置信 息 超时 。") 

break; 


} 


可 选 参数 options 对 象 可 以 调整 HTMLS Geolocation 服务 的 数据 收集 方式 。 该 对 象 有 三 
个 可 选 参数 。 

€ enableHighAccuracy: 如 果 局 动 访 参数， 浏览 右 会 司 动 HTMLS Geolocation 服务 的 高 
精确 度 模 式 ， 这 将 导致 机 器 花费 更 多 的 时 间 和 资源 来 确定 位 置 ， 应 谨慎 使 用 。 默 认 
值 为 false; 

@ timeout: 单位 为 ms， 告 诉 浏 览 右 获取 当前 位 置信 息 所 允许 的 最 长 时 间 。 如 末 在 这 个 
时 间 段 内 未 完成 ， 束 会 调用 错误 处 理 程序 。 上 默认 值 为 Infinity， 即 无 穷 大 (无 限制 ); 

€ maximumAge: LÀ ms NF, RRA Va d HB CDU EL f ASSI] EST TRI PR] B. SCALE 
0, KEREN V dS BED IY BN ECSEVE CER 

包含 options I] SUPA RTS aH Ph. 


navigator.geolocation.getCurrentPosition (updateLocation, 
handlebhocatronError, {timeout: 10000} ); 


这 个 调用 告诉 HIML5S Geolocation 当 获 取 位 置 请 求 的 处 理 时 间 超 过 10s Cl0000ms) 时 
触发 错误 处 理 程 序 ， 这 时 ，error code 应 该 是 3. 

重复 性 位 置 更 狐 请 求 : 有 时 候 ， 仪 获取 一 次 用 户 位 置信 息 是 不 够 的 。 比 如 用 户 正 在 移 
动 ， 随 着 用 户 的 移动 ， 页 面 应 该 能 够 不 断 更 新 显示 附近 的 餐馆 信息 ， 这 样 的 信息 才 对 用 户 有 
mM. PZH, HTMLS Geolocation 服务 的 设计 者 已 经 考虑 到 了 这 一 点 ， 应 用 程序 可 以 使 
用 如 下 API 进行 重复 性 位 置 更 新 请 求 ， 当 监控 到 用 户 的 位 置 发 生变 化 时 ，HTML5 
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Geolocation kA HAH HAHA P BEER BS FFU updateLocation() 函数 处 理 狐 的 数 
据 ， 及 时 通知 用 户 。 
重复 性 位 置 更 狐 请 求 API 代码 如 下 。 


watehneosition(updatelocation oronalnanaoleTmoeanronerrornooionaloo cn 


这 个 函数 的 参数 跟前 面 提 到 的 getCurrentPosition KAM Až PE, AFA 
watchPosition 和 clearWatch 的 使 用 : 


var watchlId-navigator.geolocation.watchPosition (updateLocation, handle 
Locacion Error) s 

// 基于 持续 更 新 的 位 置信 息 实现 一 些 功 能 … 

// EFAEBEIBUNE ETA Jd 


navigator.geolocation.clearWatch (watchId) ; 


13.5 构建 应 用 


本 市 将 介绍 如 何 用 刚刚 介绍 的 “重复 性 位 置 更 狐 请 求 ” 构 建 一 个 简单 有 用 的 Web. 应 用 
程序 .距离 跟踪 占 。 通 过 此 应 用 程序 可 以 了 解 到 HTML5S Geolocation API 的 强大 之 处 。 

想 要 快速 确定 在 一 定时 间 内 的 行走 距离 ， 通 常 可 以 使 用 GPS 导航 系统 或 计 步 占 这 样 的 专 
业 设 备 。 基 于 HTML5 Geolocation 提供 的 强大 服务 ， 我 们 可 以 创建 一 个 网 页 来 跟 踊 从 网 页 被 
加 载 的 地 方 到 目前 所 在 位 置 所 经 过 的 距离 。 虽 然 它 在 台式 机 上 不 大 实用 ， 但 在 手机 上 运行 是 
非常 理想 的 。 只 要 在 手机 浏览 器 中 打开 这 个 示例 页 和 面 并 授予 其 位 置 访问 的 权限 ， 每 隔 儿 秒 
钟 ， 应 用 程序 束 会 更 狐 计算 走 过 的 距离 。 

在 此 实例 中 使 用 的 watchPosition() 函数 刚刚 在 前 文中 介绍 过 。 每 当 有 新 的 位 置 返 回 ， 束 
将 其 与 上 次 保存 的 位 置 进 行 比 较 以 计算 距离 。 距 离 计 算 使 用 著名 的 Haversine 公式 来 实现 ， 
这 个 公式 能 够 根据 经 纬度 计算 地 球 上 两 点 间 的 距离 。 

Haversine 公式 的 Javascript KEL, ARIUN F- 


function toRadians (degree) { 
return this * Math.PI / 180; 
| 
iE bhoyene ron gietanee(latitudel ionalitudel Talitude2 .ongritude2) | 
// R 是 地 球 半径 (KM) 
Var R = 627157 
var deltaLatitude = toRadians(latitude2-latitudel); 
var deltaLongitude = toRadians (longitude2-longitudel) ; 
latitudel = toRadians(latitudel); 
latitude2 = toRadians(latitude2); 
Wels —  Nerclats ae e 2 = 
Mabhesiun ele mods clc 2) + 
Math.cos(latitudel) * 
Math.cos (Latitude2) * 
Math.sin(deltaLongitude/2) * 
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Math.sin(deltaLongitude/2); 
Vee se = “PMath atan2 (Math Saoqre(ay Msbhscmp ias 
vear o ere C? 
return d; 


} 


其 中 distance) 函数 用 来 计算 两 个 经 纬度 位 置 间 的 距离 ， 我 们 可 以 定期 检查 用 户 的 位 
置 ， 并 调用 这 个 函数 来 得 到 用 户 的 近似 移动 距离 。 这 里 有 一 个 假设 ， 即 用 户 在 每 个 区 间 上 都 
^ HE I. 

WS NER BRL ILC ETB : 


// WR accuracy 的 值 太 大 ， 我 们 认为 它 不 准确 ， 不 用 它 计 算 距 离 
(Ua 000 
updateStatus ("这 个 数据 太 不 靠 谱 ， 需 要 更 准确 的 数据 来 计算 本 次 移动 距离 。")，; 
TELUEN 


} 


最 后 ， 我 们 来 计算 移动 距离 。 假 设 前 面 已 经 至 少 收 到 了 一 个 准确 的 位 置 ， 我 们 将 更 新 移 
动 的 总 距离 并 显示 给 用 户 ， 同 时 还 存储 当前 数据 以 备 后 面 的 比较 。 


ET 
var cürrentDistance ~ distancel(latitude, longitude, lastLat, lasthong)-; 
document .getElementById(" 本 次 移动 距离 ") .innerHTMI = 

"URUCEEBBHHE. "E currentDistance.toFixed(4) — " Po"; 
totalDistance t= curreni Distance; 
document .getElementById (" 总 计 移 动 距 离 ") .innerHTMI = 

人 
lastLat = latitude; 
lastLong = longitude; 
updateStatus ("计算 移动 距离 成 功 。"); 

} 


用 这 么 简短 的 不 到 150 行 的 HTML 和 脚本 代码 ， 我 们 就 构建 了 一 个 能 够 持续 监控 用 户 位 
置 变化 的 示例 应 用 程序 ， 儿 乎 完整 地 演示 了 Geolocation API 的 使 用 。 您 也 不 妨 把 它 放 到 您 
支持 地 理 位 置 定位 的 手机 或 移动 设备 上 ， 看 看 一 天 大 概 能 走 多 少 路 吧 ， 这 是 不 是 很 有 趣 呢 ? 


13.6 ”百度 地 图 API 


基于 地 理 位 置 定 位 的 应 用 开发 ， 还 有 一 个 很 有 趣 的 领域 ， 束 是 百度 地 图 的 开放 API 接 
口 ， 利 用 百度 地 图 的 大 众 版 API， 我 们 可 以 制作 包括 全 景 图 展示 、 热 力图 和 个 性 化 地 图 ， 本 
地 检索 、 周 边 检索 、 区 域 检索 、 公 交 检 索 、 交 车 检索 、 实 时 交通 等 有 趣 的 应 用 。 适 当地 选取 
百度 地 图 提供 的 某 个 模块 的 功能 ， 骸 入 到 我 们 目 己 的 页 面 中 ， 会 市 来 很 好 的 用 户 体 验 。 

接 下 来 我 们 简单 介绍 一 下 百度 地 图 API 的 使 用 流程 。 

首先 ,我 们 需要 申请 使 用 百度 地 图 需要 的 密 铀 ， 访 问 http://www.developer.baidu.com/ 
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| eter 
map/index.php， 点 击 右上 角 登 录 ， 输 入 我 们 的 百度 账号 ， 登 录 成 功 后 ， 点 击 右上 角 的 API f$ 
制 侣 ， 点 击 创建 应 用 ， 提 交 之 后 点 击 得 看 应 用 ， 找 到 密 钥 。 接 下 来 ， 创 建 任意 HIML 页 面 ， 
在 其 中 引入 百度 的 APIjs 文件 。 

黎 钥 的 使 用 方法 如 下 : 


Kerio a ITE ne: / / cod eyo, STE IG Bos com sol ey. Seal Aes is) 2h 42) 2 T a 


Lext /eae not S/n > 

其 中 参数 Vv 为 API 当前 的 版 本 写 ， 目 前 最 狐 版 本 为 1.5。 在 1.2 版 本 之 前 您 还 可 以 设置 
services 参数 ， 以 告知 API 是否 加 载 服 务 部 分 ，true 表示 加 载 ，false 表示 不 加 载 ， 默 认为 true。 

地 图 API 是 由 Javascript 语言 编写 的 ， 您 在 使 用 之 前 需要 通过 <scrip 们 标签 将 API 引用 到 
页 面 中 : 

e 使 用 V1.4 及 以 前 版 本 的 引用 方式 : 


<script src-"http://api.map.baidu.com/api?v-1.4"type-"text/Javascript"»«/script» 


e 使 用 V1.5 版 本 的 引用 方式 : 


< /ek Me eee, 


Uhren S ASISTE 


其 中 参数 v 为 API 当前 的 版 本 写 ， 目 前 最 独 版 本 为 1.45。 在 12 版 本 之 前 ， 您 还 可 以 设置 
services 参数 ， 以 告知 API 是 合 加 载 服务 部 分 ，true 表 示 加 载 ，false 表示 不 加 载 ， 默 认为 tue。 

接 下 来 我 们 束 可 以 在 我 们 目 己 的 JS 中 调用 百度 地 图 的 API 了， 大 家 可 以 访问 
http://developer.baidu.com/map/jsdemo.htm#al 2 在 这 个 示例 页 面 中 ， 百 度 为 我 们 提供 了 详尽 的 
示例 。 
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14.7 像素 乌 游 戏 以 及 布局 
14.8 BRS SOR 


14.1 短信 二 次 开发 平台 简介 


微 信 开发 即 微 信 公 众 平 台 开 发 ， 将 企业 人 信息、 服务、 活动 等 内 容 通 过 微 信和 网 页 的 方式 进 
行 表 现 。 用 户 通 过 重 单 的 设置 ， 束 能 生成 微 信 3G 网 站 ， 通 过 短信 公众 平台 将 企业 品 脾 展示 
给 短信 用 户 ， 可 以 减少 宣传 成 本 ， 建 立 企业 与 消费 者 、 客 户 的 一 对 一 互动 和 沟通 ， 将 消费 者 
接 入 企业 客户 管理 系统 ， 进 行 促销 、 推 广 、 宣 传 、 售 后 等 活动 ， 进 而 形成 了 一 种 线 上 线 下 微 
信和 互动 营销 的 方式 。 

通过 二 次 开发 可 以 将 公众 账 喜 由 一 个 尹 体 型 彰 销 工具 转化 成 捉 供 服务 的 产品 ， 而 一 旦 成 
为 用 户 需 要 的 产品 ， 公 众 账 志 的 营销 功能 便 会 开局。 

微 信 的 核心 是 通信 工具 ， 这 一 工具 属性 将 用 户 牢 牢 地 条 在 了 平 侣 之 上 。 用 户 和 企业 可 以 
非常 方便 地 在 上 和 面 进行 沟通 ， 所 以 微 信 很 目 然 地 就 成 了 企业 的 客户 管理 系统 平台 ， 这 也 给 了 
企业 将 服务 引入 平台 的 机 会 。 事 实 上 ， 除 了 CRM， 很 多 企业 开始 尝试 根据 客户 场景 化 需求 


引入 和 直接 交易 ， 这 种 方式 在 微 信和 营销 里 不 再 是 隐 驶 撞 痒 的 品 牧 宣传 。 


14.2 ”做 信 二 次 开发 原理 


微 信 二 次 开发 其 实 就 是 将 微 信 服务 器 作 为 一 个 转 友 服务 器 。 当 我 们 的 终 疾 ， 包 括 手机 ， 
平板 发 起 请 求 到 微 信服 务 颖 的 时 候 ， 微 信服 务 器 这 时 会 将 这 个 请 求 转 给 我 们 的 目 定 义 服务 ， 
微 信 提供 了 很 多 的 服务 ， 例 如 : 和 群发 功能 、 目 定义 菜单 、 上 自动 回复 等 免费 服务 。 当 请 求 到 达 
自 定 义 服务 之 后 ， 微 信 会 将 最 终 的 啊 应 反馈 给 用 户 。 

e 通信 的 协议 : HTTP 协议 ; 

@ 数据 的 格式 : XML. 


14.3 ” 微 信 二 次 开发 步 又 


进行 微 信 开放 平台 开发 的 步骤 : 

C1) 要 进行 微 信 二 次 开发 ， 首 先 你 需要 有 微 信 号 ， 所 以 第 一 步 你 必须 有 微 信 开 发 者 账号 。 

在 百度 搜索 微 信 公众 平台 ， 点 击 注册 。 注 意 选择 类 型 时 ， 选 择 订 阅 号 ， 主 体 类 型 选择 个 
人 ,以 及 真实 的 身份 证 信息 ， 如 图 14-1 所 示 。 

(2) 注册 成 功 后 ， 相 当 于 你 现在 是 有 一 个 微 信 公众 号 ， 但 是 微 信 只 提供 一 些 基础 的 服 
务 。 如 果 你 想 拥有 更 多 的 服务 和 功能 ， 你 需要 目 己 进行 开发 ， 微 信 会 给 你 提供 大 量 的 接口 。 
登录 个 人 公众 平台 中 心 ， 选 择 开 发 者 中 心 ， 即 可 成 为 开发 者 。 

(3) 成 为 开发 者 之 后 ， 你 要 进行 二 次 开发 ， 比 如 你 需要 群发 消息 、 自 动 回复 之 类 的 ， 你 
必须 有 自己 的 服务 器 ， 微 信 无 法 给 每 个 用 户 提 供 服务 器 ， 所 以 你 需要 上 自己 去 租用 百度 或 者 其 
他 的 服务 器 ， 在 这 里 我 们 以 百度 为 例 。 

在 百度 上 ， 搜 索 百 度 开 放 云 平台 ， 然 后 注册 百度 开放 云 用 户 。 注 册 成 功 以 后 ， 登 录 百 度 
开放 云 。 然 后 购买 服务 器 ， 找 到 服务 类 别 里 面 的 应 用 引擎 BAE。 在 这 里 你 需要 实名 认证 ， 如 
图 14-2 所 示 。 点 击 认 证 ， 进 行 实 名 认证 。 此 认证 需要 1 一 2 个 工作 日 。 
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认证 成 功 之 后 ， 你 就 可 以 购买 自己 的 服务 器 了 ， 在 应 用 引擎 里 添加 部 署 。 也 就 是 在 整个 
服务 器 里 ， 建 立 自 己 的 域名 ， 如 图 14-3 所 示 。 


1 基本 信息 2 邮箱 激活 3 迁 反 类 型 4 信息 登记 5 公众 号 信息 


用 户 信 息 登 记 


微 信 公众 平台 致力 于 打 计 真实 、 合 法、 有 效 的 互联 网 千 台 。 为 了 村 好 的 保 尖 你 和 广大 微 
信用 户 的 合法 权益 ,请 你 认真 填写 以 下 登记 信息 ， 


用 户 信息 登记 审核 通过 后 : 
1. 你 可 以 依法 砷 有 本 微 信 公 een ae 


3. 人 39 注 册 信息 将 在 法 和 ~ 允许 的 和 时 内 向 从 信用 户 展示 : 
4. 人 民法 院 、 检 察 院 、 公 安 机 关 每 有 权 机 关 可 向 颖 讯 依 法 调 取 你 的 注册 信息 每 ， 


请 确认 你 的 微 信 公 众 帐 号 主体 类 型 悍 于 政府 、 漂 体 、 企 业 、 丰 他 组 织 或 个 人 ， 并 清 按 照 
对 应 的 类 别 进行 信息 登记 。 点 击 直 看 微 信 公 众 平 台 信 有 息 登记 指引 。 


帐号 类型 TRS 


=o 如 何 运 择 主 体 尝 型 ? 
政府 p: irs 企业 其 他 给 织 个 人 
个 人 类 型 包括 : 让 自然 人 注册 和 运营 的 公众 帐号 。 暂 不 支持 个 人 进行 微 信 
WE. 
主体 信息 登记 
信息 审核 成 功 后 身份 证 姓名 不 可 修 
改 ; 如 果 名 字 包 合 分 隔 号 “.”， 
WEE. 


身份 证 号 码 | 


请 纺 入 您 的 身份 证 号 码 ， 一 个 身份 
iPS RSH MAES. 


ERES STRESOM, Serm 


注册 后 ， 扫 码 的 微 信 号 将 成 为 该 账号 
运营 者 信息 登记 的 管理 员 微 信号. 
SRRLASERTE Se. 
运营 省 手机 ES 
号 码 请 榜 入 您 的 手机 号 码 , ns 
码 只 能 注册 5 个 公众 帐号 . 


14-1 


r | | 
所 卦 姓名 过 与 身份 证 上 的 姓名 保持 一 至 

* 身份 证 号 : | | 
请 使 用 二 代 身 份 证 ,身份 证 号 为 18 位 
同一 身份 证 号 只 能 认证 一 次 

* 手持 身份 证 照片 : | + | 
o BESEEIUH. Am Ho SEES ”会考 样式 > 
o 身份 证 为 本 人 持 有 , HAGERMSSSES ， 身份 证 全 部 信息 ( 包括 身份 证 号 、 头 像 ) Sears 
o 照片 未 经 任何 软件 编辑 修改 
o 格式 要 求 jpg、jpeg、png , 不 超过 10MB 

| 


* 身份 证 扫描 (反面 ) : + 选择 文件 | 


请 上 传 身份 证 反面 的 原件 照片 或 彩色 扫描 件 ， 文 字 清晰 可 辨认 ”查看 示例 > 
格式 要 求 jpg、jpeg、png ,不 超过 10MB 


o 


o 
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实战 宝典 
* 名 称 : 


"ERJ : nodejs-web n (?] 


* 域 名 : | 由 小 写字 和 母 和 数字 组 成 ，6~40 个 字符 ， 创 建 后 不 能 修改 -duapp.com 


“代码 版 本 工具 : svn er 


“执行 单元 个 数 : : | 1 + (P 〈 如 果 执 行 单元 配额 不 足 ， 请 通过 工 单 申请 更 多 配额 ) 


执行 单元 套餐 : 内 存 (MB) 64 128 256 512 1024 2048 


需 支付 : ¥0.40/K M smentuinmmed 计 蓝 详细 说 明 
@ mE 百度 应 用 引擎 骤 务 协议 、BAE 域 名 绑 定 服务 协议 
若 涉及 网 站 部 署 服务 ， 需 要 先 备案 后 访问 。 目 前 无 法 受理 山东 、 西 藏 地 区 备案 业务 ， 请 慎重 购买 。 


图 14-3 


在 类 型 里 你 可 以 选择 你 页 面 的 代码 ， 例 如 php. java 和 node.js。 在 版 本 工具 里 ， 你 要 选 
择 本 地 和 服务 器 进行 联系 的 工具 。 
到 这 一 步 ， 服 务 器 建立 完毕 ， 如 图 14-4 所 示 。 


FEE -| a [9] 
© APPID/ 名 称 状态 类 型 自动 发 布 资源 数 域名 SVN/GIT 地 址 操作 
口 appid5jo2id33gu [ 正常 php-web 否 1 (修改 ) mszsnn.duapp.com S484) 快捷 发 布 
mszsnn 更 多 操作 v 
© | Zg 启 || me [u] 
图 14-4 


(A) 将 服务 器 和 本 地 建立 联系 

如 栗 在 添加 部 普 的 时 候 ， 选 择 的 服务 右 与 本 地 联系 的 方式 是 SVN， 那 么 陨 需 要 下 载 
tortoiseSVN: http://tortoisesvn.net/downloads.html . 

GUAR AE YS DTS NIN, XE PERSE AS it ASHER AR Jg ae github， 那 么 你 需要 下 载 
github: http://github-for-Windows.en.softonic.com. 

在 这 里 以 SVN A Pil: KRI svn 以 后 ， 选 择 一 个 文件 来 ， 然 后 右键 选择 SVN 
checkout， 在 URL of repository 文本 框 中 填写 在 部 车 里 SVN/GIT 的 地 址 ， 然 后 点 击 OK， 如 
图 14-5 所 示 。 

你 会 看 到 文件 夹 里 有 了 一 个 index.php 的 一 个 文件 ， 这 个 文件 是 你 的 服务 器 于 认 打 开 的 
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微 信 游戏 开发 


| O° Checkout im 


Repository 
URL of repository: 
| 
Checkout directory: 
E:\ 新 建文 件 来 


Multiple, independent working copies 


Checkout Depth 


Fully recursive v 


Revision 
@ HEAD revision 


| Show log 
—P co —— MÀ 5 x 
°°’ fk. 


-—À — 


图 14-5 


GO 有 了 目 己 的 服务 器 ， 但 是 要 和 微 信 进行 联系 ， 束 需要 对 微 信 的 服务 器 进行 配置 ， 需 
要 设置 TOKEN， 然 后 和 微 信 进行 对 接 。 所 以 用 户 需 要 下 载 对 接 的 源码 ， 并 且 上 传 到 服务 器 
上 ， 然 后 微 信 和 就 可 以 和 服务 器 建立 联系 ， 如 几 14-6 所 示 。 

URL: 百度 云 平 台 里 的 部 署 域 名 ， 就 相当 于 门牌 号 。 

TOKEN: 束 像 是 钥 电 。 微 信和 服务 器 联系 的 上 暗号。 

ik: 在 这 之 前 需 补 全 目 己 的 基本 信息 ， 至 少 需要 上 传 头像 。 


群发 功能 配置 项 接口 报警 

自动 回复 — — P | 

SESEL] 

投票 管理 四 开发 者 ID 

+ 添加 功能 插件 | AppID( 应 用 ID) wxca0d8045465d7b64 
pow | AppSecret( 应 用 密 铀 ) ST FE 
Q 管理 

消息 管理 | 

Hem 服务 器 配置 (未 启用 ) 修改 配置 启用 

素材 管理 | 

| | “启用 并 设置 服务 器 配置 后 ， 用 户 发 给 公众 号 的 消息 以 及 开发 者 需要 的 事件 推送 ,将 被 微 信 转 发 到 该 URL 

出 推广 | 中 

广告 主 

mar | URL( 服 务 器 地 址 ) 未 填写 
© tat | Token(SR£) 未 填写 

| EncodingAESKey( 消 息 加 解密 密 钥 @) 未 填写 

用 户 分 析 | 消息 加 解密 方式 “明文 模式 

图 文 分 析 

消息 分 析 —— 

接口 分 析 

-一 开发 者 工具 
o 设置 | 

公众 号 设置 | 

am | E1 A 

安全 中 心 | B senmi Ge 公众 平台 测试 帐 ”公众 号 第 三 方 平 

违规 记录 | 开发 者 文 档 B 开发 者 问答 系统 号 台 


FEE 
| E 
Ik] 14-6 
WkB as: 开发 者 工具 里 有 开发 者 文档 ， 打 开 开 发 者 文档 ， 开 发 者 必 谈 一 撤 入 指 两 。 请 话 
细 阅 读 接 入 指南 。 然 后 下 载 PHP 代码 示例 ， 如 图 14-7 所 示 。 
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1. 将 token、timestamp、nonce 三 个 参数 进行 字典 序 排序 
2. 将 二 个 参数 字符 惠 拼 接 成 一 个 字符 起 进 行 sha]1 加 密 
3. 开 点 者 获得 加 密 后 的 字符 索 可 与 signature 对 比 ， 标 识 该 请 求 率 源 于 微 信 
检验 signature 的 PHP 示 例 代 倘 : 

private function checkSignature() 

$signature = $ GET['signature'T; 

$timestamp = $ GET['timestamp']; 

$nonce = $ GET['nonce']; 

$token = TOKEN: 

$tmpArr = array($token, $timestamp, $nonce); 

sort($tmpArr, SORT STRING); 

$tmpStr = implode( $tmpArr ); 

$tmpStr = shal( $tmpStr ); 

if( $tmpStr == $signature )( 

return true: 
lelse{ 


return false: 


} 


PHP CS FER: RE 


图 14-7 


打开 PHP (SNP Zia, ee TOKEN, WE 14-8 所 示 。 


define("TOKEN"，" 在 这 里 填写 你 自己 定义 的 TOKEN"); 


$wechatObj wechatCalLbackapiTest(); 
$wechatObj - .valid(); 


图 14-8 


定义 好 TOKEN, 然 后 将 改动 后 的 文件 复制 到 你 的 SVN 或 者 是 GIT 的 文件 夹 里 ， 并 且 改 
名 为 iIndex.php, 然 后 你 需要 长 传人 宇 你 的 服务 器 ， 石 键 SVN commit， 当 所 有 的 文件 有 绿色 对 勾 
的 标示 的 时 候 ， 表 示 你 的 服务 区 疹 的 文件 和 你 本 地 的 文件 没有 改动 。 然 后 打开 百度 服务 髓 冰 
和 著 ， 会 发现 有 狐 版 本 ， 然 后 点 击 快捷 友 布 ， 当 提示 发 布 成 功 后 ， 这 一 步 束 完成 了 ， 如 图 14-9 
BAAR o 


=. ~ 区 ri 


国 。 APPID/ 名 称 状态 类 型 自动 发 布 资源 数 域名 [2] 


SVN/GIT 地 址 操作 
appid5jo2id33gu e FẸ php-web E 1 (修改 ) mszsnn .duapp.com ”点 击 复制 快捷 发 布 
mszsnn =) BSE v 
日 
appid5jo2id33g © 未 创建 php-web 否 0 (修改 ) - - EI beta [E] 
mszsnn [Bt] 
8 (we lla oe PS: 部 雪 和 暂停 或 重启 后 本 地 临时 文件 格 被 自动 清理 , 查看 详情 > >) m 


(6) 返回 微 信 开 发 者 中 心 ， 点 击 修 改 服 务 器 配置 ， 在 这 里 配置 TOKEN， 以 及 百度 云 服 
务 器 的 域名 ， 然 后 点 击 提 交 ， 提 示 验 证 成 功 即 可 。 至 此 ， 就 可 以 进行 微 信 平台 的 二 次 开发 
Y, WK] 14-10 Pras. 
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URL http://mszsnn.duapp.com 


必须 以 http:// 开 头 ， 目 前 支持 80 端 口 。 


"m [m —— — — 


必须 为 英文 或 数字 , 长度 为 3-32 字 符 。 


什么 星 Token ? 
EncodingAESK | 7rySTNutCEVEldVnJCkJ2I90ICJaTFORGAYalyllfi 43 /4 | 随机 生成 | 
Sy 消息 加 密 密 钥 由 43 位 字符 组 成 ， 可 随机 修改 ,字符 范围 为 A-Z , a-z , 0-9. 
什么 是 EncodingAESKey ? 


消息 加 解密 方式 ”请 根据 业务 需要 ,选择 消息 加 和 解密 类 型 ， 启 用 后 棕 立 即 生效 


e 明文 模式 

明文 模式 下 ， 不 使 用 消息 体 加 解密 功能 ,安全 系数 较 低 

PREL 

兼容 模式 下 ， 明 文 、 密 文 将 共存 ,方便 开发 者 调试 和 维护 
安全 模式 (推荐 ) 

安全 模式 下 ， 消 息 包 为 纯 密 文 ， 需 要 开发 者 加 密 和 解密 ， 安全 系数 高 


14-10 


14.4 ”自动 回复 功能 示例 


wm 功能 自动 回复 
群发 功能 
自动 回复 已 开启 自动 回复 设置 
通过 编辑 内 雁 或 关键 词 规 则 ， 快 速 进行 自动 回复 设置 。 如 具备 开发 衣 
EixEX ER 


Nun T— Rte | 关键 词 自动 回复 


"-———————————ÁÁ ———— 


| ^x* ee Os 


14-11 


微 信 游戏 开发 


在 配置 好 了 微 信 开 发 所 需要 的 接口 之 后 ， 这 次 我 们 实现 一 个 自动 回复 消息 的 示例 。 
公众 平台 ， 选 择 自 动 回复 ， 如 图 14-11 所 示 。 


(1) 确保 你 已 经 有 资格 进行 微 信 二 次 开发 ， 要 进行 消息 目 动 回复 ， 你 需要 做 的 是 目 定 义 
遇 到 什么 类 型 的 消息 ， 要 进行 目 定 义 回 复 。 比 如 : 被 添加 关注 、 关 键 字 上 自动 回 复 、 消 息 目 动 
器 复 。 在 这 里 我 们 选择 关键 了 学 消 轧 回复 。 
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HTML5 
| ss ea 
规则 名 : 你 所 要 目 定 义 的 目 动 回复 的 名 字 ; 
ABE: 当 用 户 输入 什么 内 容 的 时 候 和 需要 进行 日 动 回 复 ; 
I: 你 目 定 义 的 目 动 回复 的 内 容 。 
在 这 里 示例 内 容 为 : 
Ae XA: 打招呼 回复 ; 
SRE: TRIE: 
SS: 你 好 ! 欢迎 进行 微 信 二 次 开发 。 
如 图 14-12 所 示 。 


十 添加 规则 


规则 1: 打招呼 回复 ^ 


。 规则 名 | 打招呼 回复 
规则 名 最 多 60 个 字 


。 关键 字 添加 关键 字 
。 回复 [| 回复 全 部 
* 加 9$ [Xx 


文字 (0)、 图 片 ()、 语音 (0)、 视频 (0)、 图 文 (0) IM 


图 14-12 
(2) 在 保存 了 之 后 ， 基 本 设 首 残 已 经 创建 完成 了 。 这 时 候 我 们 模拟 用 户 去 访问 ， 当 然 前 
提 是 需要 用 户 先 关注 本 微 信 公众 号 ， 在 打开 了 对 话 框 之 后 ， 用 户 键 入 “你 好 ”*， 那 么 束 可 以 看 
到 目 动 回复 了 “你 好 ! 欢迎 进行 答 信 二 次 开 友 。” 效 来 如 图 14-13 Bra. 


你 好 E 


i- 你 好 ! 欢迎 进行 微 信 二 次 开发 。 


图 14-13 


194 


Eee 
微 信 游 戏 开发 


14.5 fe XT AIK 


作为 最 独 版 的 网 页 协议 标准 ， 在 对 于 游戏 开 友 方面 ，HTMLS 最 大 的 优点 就 是 对 于 现在 
的 智能 移动 终端 设备 的 良好 支持 性 。 为 了 这 一 目的 ，W3C 其 至 专门 成 立 了 DeviceAPI 工作 
组 ， 为 HIMLS 添 加 了 对 智能 移动 设备 例如 GPS 和 各 种 硬件 感应 器 功能 的 API 支持 ， 以 至 于 
让 HTMLS 能 够 在 移动 设备 上 大 放 寞 彩 。 

为 了 开发 微 信 游 戏 ， 你 需要 了 解 的 技术 包括 : JavaScript. HTML. CSS 以 及 移动 终端 的 
相关 知识 。 


14.6 ”做 信 游 戏 推 运 方 式 


在 144 节 介 绍 的 天 于 消息 回复 的 基础 上 ， 实 现 微 信 游 戏 的 推送 ， 选 择 自 定义 的 菜单 回 
复 ， 如 图 14-14 所 示 。 


Howe 自 定义 菜单 icd 


某 单 编辑 中 
@ 菜单 未 辰 布 ， 请 确认 某 单 编辑 完成 后 点 击 “保存 并 发 布 ”同步 到 手机 。 若 停 用 菜单 ， 请 点 击 这 里 


ARIS 删除 菜单 

全 管理 菜单 名 称 新 闻 茉 单 

消息 管理 字数 不 超过 4 个 汉字 或 8 个 字母 

用 户 管理 

x 菜单 内 雁 O 发 送 消息 © 跳 转 网 页 
qq( 推广 订阅 者 点 击 该 子 菜单 会 跳 到 以 下 链接 

广告 主 页 面 地 址 认证 后 才 可 手动 输入 地 址 

流量 主 从 公众 号 图 文 消息 中 选择 
e 统计 

14-14 


(1) 在 申请 成 为 微 信 开发 者 的 时 候 ， 我 们 已 经 具有 了 目 己 的 服务 器 ， 在 编号 完成 游戏 的 
代码 之 后 ， 只 需 将 游戏 提交 在 服务 费 闹 ， 获 取 到 链接 地 址 URL. 

(2) 选择 了 目 定义 菜单 之 后 ， 我 们 可 以 目 定义 菜单 的 名 称 ， 当 然 ， 你 可 以 定义 为 游戏 的 
名 称 。 然 后 选择 跳 转 网 页 ， 只 需要 将 链接 的 URL 地 址 填写 即 可 。 当 访客 选择 此 菜单 ， 即 可 
收 到 推送 的 游戏 。 


14.77 ”像素 乌 游 戏 以 及 布局 


(Flappy Bird》 是 一 球 由 来 日 越 责 的 独立 游戏 开发 者 Dong Nguyen 开发 的 作品 ， 游 戏 于 
2013 年 5 月 24 日 上 线 ， 并 在 2014 年 2 月 爆 红 。 游 戏 中 玩家 必须 控制 一 只 小 乌 ， 路 越 由 各 种 
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HTML5 


EN vus 
不 同 长 度 水 管 所 组 成 的 障碍 ， 如 图 14-15 所 示 。 


| Mes EBRHgd-HLbrxkrlappy bird 


14-15 


像素 岛 ， 即 仿 Flappy Bird 游戏 ， 主 要 用 到 的 技术 点 如 下 : 
€ Phaser: 开源 的 HIMLS 2D 洲 戏 开发 框架 ; 

@ HIMLS 中 的 Canvas。 

EGE: 


scale=l. 


任何 缩放 
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<| DOCTYPE HTML> 

«html» 

«head» 

«meta content="yes" name-"APPle-mobile-Web-APP-capable"/» 
«1--BUESEAATIISE IR LREUNIGIEERRS, --> 

«meta content="yes" name-"APPle-touch-fullscreen"/» 

<!--" 添 加 到 主屏 幕 “后 ， 全 屏 显示 --> 

<meta content="black" name="APPle-mobile-Web-APP-status-bar-style"> 
<1 --VE FA EPR ASE AN EZ - > 


<meta content="width=device-width, initial-scale=1.0, maximum- 


0, user-scalable-no" name-"vIEwport" /» 

<!--width: 可 视 区 域 的 宽度 ， 值 可 为 数字 或 天 键 词 device-width 

hea ghic: in 

intial-scale: 页 面 首次 被 显示 是 可 视 区 域 的 缩放 级 别 ， 取 值 1.0 则 页 面 按 实 际 尺 寸 显 示 ， 无 


maximum-scale=1.0，minimum-scale=1.0; 可 视 区 域 的 缩放 级 别 ， 
maximum-scale 用 户 可 将 页 面 放大 的 程序 ，1 .0 将 禁止 用 户 放 大 到 实际 尺寸 之 上 。 
user-scalable: 是 否 可 对 页 面 进行 缩放 ，no 禁止 缩放 --> 

<meta charset="utf-8" /> 

<ticle-fIAPPy 6s title= 

Sie lee 


EMES 
微 信 游戏 开发 
Body, pr dry (mana bombe Ol padding: Or] 
Ganvas{ Margun: 0 auto; } 
/* 1€ phaser PH4I] f Canvas*/ 
</style> 
<script Sre—' 75/phesecr.Min.qs -—/Sscripe 
<!--Phaser 是 一 于 专门 用 于 桌面 及 移动 HTML5 2D WRIT RATA ARIER, --> 
</head> 
<body> 


<div id="game" style="margin: 0px"></div> 
< lt re yam] < /Serio = 

<!-- 具 体 的 游戏 实现 JS--> 

Do 

<7 hem i> 


14.8 ”像素 乌 效 果实 现 


game.js 代码 如 下 : 


vo aae e aaa aea eae a a a e aao aa S a S a 
game.States = {}; // 存 放 state WR 


game.States.boot = function(){ 

this.preload = function() { 

if (!game.device.desktop) {// 移 动 设备 适应 
taioe cale sel Siiocks = Elisa ed ensmagenms e 
Ehis.scale.forcePortrait = true; 
this.scale.refresh(); 

} 
game.load.image('loading','assets/preloader.gif'); 
^; 

this.create = function()( 
game.state.start('preload'); //Bkf Sv 75 r2; v4 TH] 

^; 

} 


Gemes See CSS eo A 
ES preload rom 2 301 CL 


| 


££ zx loading HEH sprite 


game.load.setPreloadSprite (preloadSprite) ; 

// 以 下 为 要 加 载 的 资源 

e a e a a a 
站 

am me a 

game lo DY ee a Eea on er nr 
game.load.image('btn','assets/start-button.png'); hl 
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HTML5 
E c5 


ciens Lolo Sor Leases (eros ne dle S20. 20 o C secs 

gome 5 Oeicla/sncmeyol ome |) IVR, (E > 
'assets/fonts/flAPPyfont/flAPPyfont.png', 
'assets/fonts/flAPPyfont/flAPPyfont.fnt'); 

game.load.audio('fly sound', 'assets/flap.wav');// KPI 


game.load.audio('score sound', 'assets/score.wav') ;//f4 WX 


game.load.audio('hit pipe sound', 'assets/pipe-hit.wav'); // 撞 击 管道 的 首 效 
game.load.audio('hit ground sound', 'assets/ouch.wav'); //$&iu rr xx 


game , loacl, umeage ("esc tex", aese5s9y oeu-cesoy gm s 


( 
geme Load me teles apt, sse iste E. 0s cp ^) £ 
games load mage C see. owes," me omg!) x 
geme Towel. were " Score Doar , "am seus 0 07 omg") ¢ 
} 

this.create = function() { 

game.state.start('menu'); 


} 
} 


game.States.menu = function() { 

this.create = function() { 

game add Lule rite(0 0, game. widen, game. height, background’) Eee 
IL (eor Oo 1 jas 

game.add.tileSprite(0,game.height- 
12 , Gente aclela, LIZ, Voscotiae |) | SURES SOL (100, 0) 2 8H 

var titleGroup = game.add.group(); //H#ARUranZ 

IE c n Jae 

Were baird — tiacleccouesenea cat) 10, lotic!) ar ssl ds Ee 

rel rn add riy ) ses ilies 

bird.animations.play('fly',12,true); //4/4R3) 0 

tie dli ERIS r —— oe, 

ertlecrou y ~ 100; 

me wes ele TE t mM 
LUE, true); // 标 题 的 绥 动 动画 

var Dien = 
Game add bPutron (Games wilde) 2ecamesholenn, en omnee 0 / si ted 

game. state.start('play'); 

}); 

bcn. anchor. setcTo(0.5-0.5) 5 

} 

} 


ereune cs Bees sole om | 
(Cle! idee CS IC EO TE 


Ehnus-bgq ~ Game ado tulesprite (0,07 games width, game height, Dackground'); 
/ /背景 图 
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TALS 
TALS 
TALS 


I oome. velim Ne ECT TIN CIA. 


this 
this 
this 
this 
game 
this 
game 
melanins 


this 
this 
thais 
this 
this 
PE CONE 


this 
ready MF 
this 
this 
this 


this 
game 
game 
game 
^; 

ehis 


if ('this.hasStarted) 


game 
TALON 

game 
null, tnis) s 


ub 


frd [es HE KFT AZ 


.PipeGroup = game.add.group (); 


.pipeGroup.enableBody true; 


Ground game.add.tilesprite(0,game.heright- 


/ / HEIR 
"doe game add -prire 0 150, Moms eo e 


Dir elm aber eco nobel elem EI UP 


lra -animations cpu @) ily Ere 

OSes 
.physics.enable(this.bird,Phaser.Physics.ARCADE); // 开 局 乌 的 物理 系统 
0; // 乌 的 重力 ,未 开始 游戏 ， 先 先 让 他 不 动 
.physics.enable(this.ground,Phaser.Physics.ARCADE);//3h[8 
// 国 定 不 动 


LE anchor. sein Ile: (0.5, 


reo body: graviiy.y ~ 


.ground.body.immovable true; 


severe ky Gamezade sound” mily Soundi; 


Sound core Gamewacda. sound scone soundi); 


“SoundHit Pipe game <add soundi a ET eom 


neces Ground game Tadd sound (Chit ground coundi, 


~SCOEGTECXE 
UT es) e 


game .add.bitmapText (game.world.centerX-20, 307 


.readyText ganes aC h aegre (Cm wien 2, 40, "esc rex.) 5 /Jgreu 


gom oo e abiere (creme , wacchum 2 5900/7. “ella io”) / /提示 点 击 
0); 
0); 


Ol ab 
»Lreadvylext. anchor .serlo (0.5, 


(Olay WL anchor: o LO E 


Miaoetarted / /游戏 是 否 已 开始 


Elim events. LooD(900, 


false; 
this.generatePipes, this); 
.time.events.stop (false); 


input onDown addonce bh sed amens 


. update func E Oa |) í 


/ /游戏 未 开始 
-Physics arcadeseol lide(thie bird, this, dqnound, 
/ / Eg Wi oli E 

Physics arcade sOverlap(thrs bird, 


// 与 管道 碰撞 


return; 
this.hitGround, 


enre ol ee a qms amt Paper 


if (this.bird.angle < 90) this.bird.angle += 2.5; Fe LT 


this 


/ / 4) BOS MAL SEU 


-PI peCGroup. fOrEachbhxuses (emus echeckscore, nes 


.StatrGame = function() { 
.gameSpeed = 200; //UUXXERE 
.gameIsOver = false; 
.hasHitGround = false; 
.hasStarted = true; 
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实战 宝典 


false); 
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thus score = 0; 

this .bg.autoscroll(—(this.gameSoeed/10) , 0); 
this groungd autoSseroll( this gameopeed,.0)> 
this.bird.body.gravity.y = 1150; // 鸟 的 重力 
jedes el reacdy Text voles tege on (OP 

tario- -playlip:-destroyl):; 

ame VOU wn 
game.time.events.start(); 


} 


this.stopGame = function() { 

ues lex SC ol ico OG 

hr oovunm st ons elo lm), 

this JolpeGroup. torkhachixmstes (funce lem ono) 
pipe.body.velocity.x = 0; 

|o vale ud 
Si 

0 二 ob 
game.time.events.stop (true); 


} 


lass) ae Lye — ie inven on) 

ehir bair Dody velocity y= = xS SOL 
game-add-tweenm(rhis.bvrd)totlangte:-3007 100, 
E E 

enice oundi y es 

} 


ea Ee FUN Eron) 

if (this.gamelsOver) return; 

this soundhitPipe play); 
this.gameOver () ; 

} 

ee Cor. On GE et Maer Om) a 

(pais phasis teround) return; LESE sa a 
this.hasHitGround = true; 

this soundit round. play (I; 
this.gameOver (true); 

} 

Chess Gameover Fumesron( snow text) 
this.gamelsOver = true; 
this.stopGame () ; 

aan (SIMON eere) elo howComeOverlexe(), 


n 


this.showGameOverText = function (){ 


mall, 


true, 


frd [es HE KFT AZ 


pince acoreText MC EINE 


game.bestScore = game.bestScore || 0; 
re th eor a a 
lle. giewmeioweeerene-- cemne eckl.cqretts (o d d WS ME ah 

var gameOverText = 


this.gameOverGroup.create (game.width/2,0,'game over'); //game over XTRA 
var scoreboard = 


lias « Crete Om Dro.» creas | qeme .wacigas 2, TO, " eeose Ixoeeel ) / /分 数 板 


var currentScoreText = game.add.bitmapText (game.width/2 + 60, 105, 
'flAPPy font', this.score+'', 20, this.gameOverGroup); //J5B[42r2X 

var bestScoreText =  game.add.bitmapText(game.width/2 + 60, Toos 
'flAPPy font', game.bestScoret+'', 20, this.gameOverGroup); // RON 

var replayBtn = game.add.button(game.width/2, ZO Dot 


function (){// 重 玩 按钮 
dame State.start( play’); 
Pe eines emilee amuse Ie nul skis came Gus TON TUS 
GreueOweuc Wee: . cinch. SezTo(O.5, (0) 5 
seoreboargd mhor. seno 0) 4 
replavetn anchor setlo(0.5 Ol; 
this.gameOverGroup.y = 30; 
} 
mi ener pe “ee om S / qlee E 
gap = gap || 100; // 上 下 管道 之 则 的 间 了 宽度 
var position — (202 5A) Gap) ise tloom (S055 NES ME 
SS UI Gap) =e Maa random) 
var topPiper — position 300; 


var bottomPipeY = positiont+gap; 
in (EMS. resci Pipe PoDPNpev DOE OMe IDEM) return, 


var  topPipe =- “camer adadssprire (game width, Eee ree OF 
this pioSeeroup) | 

var bobttomPrpe = Gamevadd. sprite (gGame.width, bDottomPiper, a oe 1, 
plimscpvrpesroup). 

this plpeGroup. sercAlil( chneckWorlodePoungde Eroe 

his PipPeCroum S tA (T ouUEOftBoungderitl truel.: 

this. pipecroup:setAll( body. velocity x this. eam ee 

} 

this.resetPipe = function (topPipeY,bottomPipeyY) {//BBWSWAN PIE, (el 
回收 利用 

Www 

this pipPpeCroup forhachDead(tftunetion (Pioe)l 

if (pipe.y<=0) { //topPipe 

pipe.reset(game.width, topPipeY); 


HTML5 
Pe kee 


pipe.hasScored = false; //HU BAS 

}else{ 

elpe. ceseu (Game. width, bod Om moe 

j 

pipe.body.velocity.x = -this.gameSpeed; 

LPF g 

eet nues 

return i == 2; // 如 果 i--2 代表 有 一 组 管道 已 经 出 了 边界 ， 可 以 回收 这 组 管道 了 
} 


this.checkScore = function (pipe) {// 负 责 分 数 的 检测 和 更 新 

in pipe Mas Cored Ge plier ny O Se Olle. x = tthe bards x | 354) 
pipe.hasScored = true; 

phucccconele»xwpbcose-c d bhucecoDEC 

this. .soundocore. play), 

rectcurn true; 

| 

return false; 

} 

} 


// 添 加 state 到 游戏 
game.state.add('boot',game.States.boot); 
game.state.add('preload',game.States.preload); 
game.state.add('menu',game.States.menu); 
game.state.add('play',game.States.play); 
game.state.start('boot'); a 


Phaecer minmn Je: 


下 载 地 址 : http:/www.phaser.com/。 
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HTML5 


附录 A: 编辑 工具 简介 


“ 工 欲 善 其 事 ， 必 先 利 其 器 *， 所 以 一 个 优秀 的 编辑 工具 对 于 开发 工程 师 是 全 关 重 要 的 。 


编辑 工具 没有 最 好 的 ， 只 有 最 合适 的 ， 对 不 同 的 开发 场景 选择 合适 的 编辑 工具 ， 为 外 还 应 照 
顾 到 个 人 的 使 用 习惯 。 本 书 中 我 们 分 别 使 用 到 了 Sublime Text、WebStorm， 这 两 球 编辑 工具 
功能 强大 、 技 术 先 进 、 各 有 特点 ， 并 且 提 供 了 非 第 清爽 的 用 户 界 面 。 接 下 来 我 们 对 这 两 球 编 
ZESRXETT fn] Z2] 4p 2 o 


A.1 Sublime Text 


A.1.1 Sublime Text 简介 

Sublime Text Zu ds iE ak VA ie) YZ CASS ak, "IDEA Lat Ei 1H. Sublime 
Text 的 最 大 优点 就 是 跨 平 台 ，Mac、Windows 和 Linux 均 可 完美 支持 ， 其 次 是 强大 的 插件 ， 
几乎 无 所 不 能 。Sublime Text 文 持 很 多 种 编程 语言 的 语法 高 之 、 拥 有 完善 的 代 但 目 动 补 全 功 
能 ， 还 拥有 代码 片段 的 功能 ， 可 以 将 名 用 的 代码 片段 保存 起 来 ， 以 供 随 时 调用 。 它 还 文 持 
Vim 模式 ， 可 以 在 Vim RA PARA aa CREST RIN. ESCH, MAA EA H ed Ss 
命令 ， 利 用 目 定 义 命 令 进行 操作 。 

A.1.2 Sublime Text 快捷 键 

Sublime Text 提供 了 完善 的 快捷 键 ， 这 些 快捷 键 能 够 让 用 户 的 开发 效率 倍增 ， 同 时 也 能 
够 更 加 享受 写 代 人 码 的 乐趣 。 接 下 来 分 邵 Sublime Text 中 一 些 常 用 的 快捷 方式 ， 如 表 A-1， 如 
有 错误 之 处 请 批评 指正 。 


表 A-1 
快 捷 Ou Jj 能 
选 择 类 
Alt+F3 选中 文本 按 下 快捷 键 ， 即 可 一 次 性 选择 全 部 的 相同 文本 进行 同时 编辑 
Ctrl+D 选中 光标 所 占 的 文本 ， 继 续 操 作 则 会 选中 下 一 个 相同 的 文本 
Ctrl+L 选中 整 行 ， 继 续 操作 则 继续 选择 下 一 行 ， 效 果 和 《Shiftt 4) 效果 一 样 
Ctrl+M 光标 移动 至 括号 内 结束 或 开始 的 位 置 
Ctrl+Enter 在 下 一 行 插入 新 行 
Ctrl+Shift+Enter 在 上 一 行 插入 新 行 
Ctrl+Shift+[ 选中 代码 ， 按 下 快捷 键 ， 折 和 登 代 码 
Ctrl+Shift+] 选中 代码 ， 按 下 快捷 键 ， 展 开 代码 
Ctrl+K+0 FEIT Ait Bhs 
Ctrl+ 一 癌 左 单位 性 地 移动 光标 ， 快 速 移动 光标 
Ctrl+ 一 癌 右 单位 性 地 移动 光标 ， 快 速 移动 光标 
Shift+ + 问 上 选中 多 行 
Shift+ | 癌 下 选中 多 行 
Shift+ 一 问 左 选中 文本 


204 


CBE) 
th 捷 键 Jj 能 
Shiftt— 癌 右 选中 文本 
Ctrl+Shiftt— 向 左 单位 性 地 选中 文本 
Ctrl+Shift+— 向 右 单位 性 地 选中 文本 
编辑 类 
Ctrl+J 合并 选中 的 多 行 代 码 为 一 行 
Ctrl+Shift+D 复制 光标 所 在 整 行 ， 插 入 到 下 一 行 
Ctrl+K+K 从 光标 处 开始 删除 代码 至 行 尾 
Ctrl+Shift+K 删除 整 行 
Ctrl+/ 注释 单行 
Ctrl+Shift+/ 注释 多 行 
Ctrl+K+U 转换 大 写 
Ctrl+Z 撤销 
Tab DIESE 
Shift- Tab In] Ac A aat 
搜索 类 
Ctrl+F 打开 底部 搜索 框 ， 查 找 关 键 字 
Ctrl P 打开 搜索 框 。 中 输入 当前 项 目 中 的 文件 名 ， 快 速 搜索 文件 ; @@ 输 入 “@” 和 关键 字 ， 查 找 文件 中 函 
数 名 ; @@ 输 入“: ”和 数字 ， 跳 转 到 文件 中 该 行 代码 ; 由 输入 “#” 和 关键 字 ， 碍 找 变量 名 
Ctrl+G 打开 搜索 框 ， 输 入 数字 跳 转 到 该 行 代码 
Ctrl+R 打开 搜索 框 ， 输 入 关键 字 ， 查 找 文 件 中 的 函数 名 
Esc ERREI, BHRR, dp mE 
显示 类 
Ctrl+Tab 按 文 件 浏览 过 的 顺序 ， a 窗口 的 标签 页 
Ctrl+PageDown 问 左 切换 当前 窗口 的 标签 
Ctrl+PageUp 问 右 切换 当前 窗口 的 标签 - 
Alt+Shift+1\2\3 左右 分 屏 -2\3 MJ, BRIA 1 列 


F11 


屏 模式 


A.1.3 Sublime Text 插件 安装 


Sublime Text 提供 了 完善 强大 的 插件 ， 用 户 可 根据 目 己 的 需要 选择 安装 不 同 的 插件 ， 这 
使 得 Sublime Text 功能 强大 义 不 失 轻巧 。 

HAUNT ee 方式 一 : AFR 

安装 Sublime text 3 插件 很 方便 ， 可 以 直接 下 载 安装 

preferences packages )。 

插件 安装 方式 二 : 使 用 Package Control 组 件 安 装 

按 下 《Ctrl+ShifttP〉 调 出 命令 面板 输入 install 调 出 Install Package 选项 并 按 回 车 键 ， 
然后 在 列表 中 选中 要 安装 的 插件 。 


包 解 压缩 到 Packages 目录 CER 


A.2 WebStorm 


A.2.1 WebStorm 简介 
WebStorm (WAA) 是 一 球 深 受 


受 的 前 站 编 辑 工具 ， 有 “最 强大 的 前 
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广大 开发 着 哥 


HTML5 

ks 

int AC LA” ZK. WebStorm 文 持 不 同 浏览 器 的 提示 ， 并 且 提 供 上 自动 补 全 功能 。 标 签 重 
构 、 文 件 重 命名 、CSS 重 构 以 及 JS 重 构 ， 使 用 文件 重 命 名 ， 扎 会 目 动 帮 用 户 更 新 所 有 的 引 
用 。 如 果 你 想 把 内 联 样式 引入 到 CSS 文件 中 ， 也 可 以 通过 重 构 功 能 实现 。WebStorm 实现 了 
对 最 新 技术 的 文 持 ， 内 置 了 对 SASS、nodeJS、angularJS 等 技术 的 文 持 。 连 Emmet 都 进行 了 
内 置 ， 因 此 Sublime Text 中 的 快捷 键 也 同样 支持 。 


A.2.2 WebStorm 快捷 键 


x A-2 
p 捷 Ou Ij 能 
代码 编辑 
€—— ze 即 可 一 次 性 选择 全 部 的 相同 文本 进 
Alt+[0-9] 快速 拆 合 功 能 界面 模块 
Ctrl+Shift+F 12 最 大 区 域 显示 代码 (会 隐藏 其 他 的 功能 界面 模块 ) 
Ctrl+Tab 切换 代码 选项 卡 
Alt+<- 或 -> 切换 代码 选项 卡 
Ctrl+D 复制 当前 行 
Ctrl+W 选中 单词 
Ctrl+<- 或 -> 以 单词 作为 边界 跳 光 标 位 置 
Alt+Insert 新 建 一 个 文件 或 其 他 
Ctrl+Alt+L 格式 化 代码 
Shift+Tab/Tab WD KARE CHI ACERS HP al TARE) 
Ctrl+Y 删除 一 行 
Shift+Enter 重新 开始 一 行 〈 无 论 光 标 在 哪个 位 置 ) 
N 
Esc 进入 代码 编辑 区 域 
Alt+F1 得 找 代码 在 其 他 界面 模块 的 位 置 
Alt+up/down oi bed Wl md WOE YS 
Ctrl+G 光标 到 代码 块 的 前 面 或 后 面 


Ctrl+]/[ 


(etrl+]/[) 


A.2.3 WebStorm 插件 安装 

O 在 主 界面 用 快捷 键 《〈Ctrl+Altts》 打开 settings 界面 ， 左 侧 导 航 栏 里 选中 plugin 项 。 

(2) 选中 plugins 后 ， 会 在 右 侧 列 出 所 有 已 安 闭 的 插件 ， 我 们 要 安 钱 一 个 新 的 插件 ， 因 此 
要 点 击 Browse repositories。 弹 出 的 新 窗口 默认 会 列 出 所 有 的 插件 ， 我 们 在 右上 角 的 搜索 框 输 
DBE HFEF SEAT SIE o 

© 下载 进度 会 显示 在 WebStorm 主 窗 口 底部 的 状态 栏 ， 下 载 完 毕 后 ， 需 要 重 局 
WebStorm 才能 生效 。 
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附录 B: HTML5 相关 API 


B.1 3 API 


HTMLS 新 增 了 更 多 丰富 的 表单 控件 ， 例 如 : 搜索 框 、 电 话 号 码 编辑 控件 、URL 编辑 控 
件 、 邮 件 地 址 编辑 控件 。HTMLS5 还 为 客户 端 表单 验证 提供 了 API. 
约束 验证 的 HTML 语法 如 表 B-1 所 示 。 


表 B-1 
属性 /方法 fii BK 
required 指定 该 元 素 必 填 
pattern 限定 元 素 值 必须 匹配 一 个 特定 的 正则 表达 式 
min/max 定 了 能 够 输入 元 素 的 最 大 与 最 小 值 
step 限定 了 输入 值 的 间隔 
maxlength 限制 了 用 户 能 够 输入 的 最 大 字符 数 
type 限制 输入 值 是 否 为 有 效 


约束 验证 的 HTML 语法 

HTMLFormElement 对 象 上 的 checkValidity) 方法 ， 当 表单 的 相关 元 系 都 通过 了 它们 的 
约束 验证 时 返回 true, EURIE] false. 

表单 相关 元 素 如 表 B-2 所 示 。 


表 B-2 
属性 /方法 fii x 
willValidate 如 果 元 素 的 约束 没有 被 符合 则 值 为 false 
validity 是 一 个 ValidityState 对 象 ， 表 示 元 素 当 前 所 处 的 验证 状态 
validationMessage 描述 与 元 素 相 关 约 束 的 失败 信息 
check Validity() 元 素 没 有 满足 它 的 任意 约束 ， 返 回 false， 其 他 情况 返回 true 
setCustomValidity() 置 自 定义 验证 信息 ， 用 于 即将 实施 与 验证 的 约束 来 覆盖 预定 义 的 信息 


目前 任何 表单 元 素 都 有 8 种 可 能 的 验证 约束 条 件 : 

(1) valueMissing: 确 保 控 件 中 的 值 已 填写 。 

FAYE: 将 required 属性 设 为 true, 

<input type="text"required="required"/> 

(2) typeMismatch: 人 确保 控件 值 与 预期 类 型 相 匹 配 。 

用 法 : <input type="email"/> 

(3) patternMismatch: 根 据 pattern 的 正则 表达 式 判 断 输 入 是 耕 为 合法 格式 。 
FAYE: <input type="text" pattern="[0-8]{10!"/> 

(4) toolong: it f/f AW A FIT. 
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用 法 : 设置 maxLength 


—M —M 


«textarea id-" notes" name="notes" maxLength="100"></textarea> 

(5) rangeUnderflow: 限 制 数值 控件 的 最 小 值 。 

用 法 : 设置 min，<input type="number" min="0" value="20"/> 

(6) rangeOverflow: 限 制 数 值 控件 的 最 大 值 。 

用 法 : 设置 max, <input type="number" max="100" value="20"/> 

(7) stepMismatch: 人 确保 输入 值 从 合 min, max. step 的 设置 。 

用 法 : 设置 max min step, <input type="number" min="0" max="100" step="10" value="20"/> 
(8) customError: 处 理应 用 代码 明确 设置 能 计算 产生 错误 。 

用 法 : 例如 验证 两 次 输入 的 密 但 是 否 一 致 。 


B.2 File API 


File API 是 Mozilla 向 W3C 提出 的 一 个 草案 ， 则 在 用 标准 JavaScript API 实现 本 地 文 
件 的 读 取 。File API 将 极 大 地 方便 Web 端的 文件 上 传 等 操作 。 
文件 读 取 函数 如 表 B-3 所 示 。 


X B-3 
属性 /方法 fii ” XN 
读 取 文件 内 容 ， 读 取 结 果 为 一 个 binary string。 文 件 每 一 个 byte 会 被 表示 为 一 个 [0，255] 


TORAS ma AEE 区 间 内 的 整数 。 函 数 接受 一 个 File 对 象 作为 参数 
mm EUA, ERARI — IEA TRIGO. EUR UR File 对 象 以 及 文本 编 
码 名 称 作为 参数 
readAsDataURL 访 取 文件 内 容 ， 读 取 结 果 为 一 个 data: 的 URL 


文件 读 取 事件 如 表 B-4 Bron. 


X B-4 
事件 Hio X 
loadstart 文件 读 取 开 始 时 触发 
loadend sr Se BU] 48 
progress 当 读 取 进 行 中 时 定时 触发 。 事 件 参数 中 会 含有 已 读 取 总 数据 量 
abort 当 读 取 被 中 止 时 触发 
error 当 读 取出 错时 触发 
load 当 读 取 成 功 完 成 时 触发 
loadend 当 读 取 完 成 时 ， 无 论 成 功 或 者 失败 都 会 触发 


B.3 #678 API 


HARITHA XE — P2038 EASE BL, HE BUEN A, PAJARO TT BR td 
HLS UA AI TA EN TUR ESRR, BCH TERR eS AAPEEE, JEER GB 
byte tls). BUS IU RIND. AY ESSE AAI TURAN © EREITEA I] BT BE AB 
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种 事件 。 注 意 ， 在 拖 搜 的 时 候 上 只 会 触发 拖 搜 的 相关 事件 ， 鼠 标 事 件 ， 例 如 mousemove， 是 不 
会 触发 的 。 也 要 注意 ， 当 从 操作 系统 拖 搜 文件 到 浏览 磺 的 时 候 ，dragstart 和 dragend 事件 不 
会 触发 。 

draggable 属性 

想 要 在 某 个 元 素 上 使 用 拖 搜 ， 这 个 元 素 必 须 具 备 dragable 属性 ， 这 个 属性 有 三 个 值 
true, false 或 者 auto. true 表示 可 以 拖 动 ，false 表示 不 能 拖 动 ，auto 表示 根据 浏览 右 的 情况 
目 行 判断 .我 们 给 一 个 div 添加 上 draggable 为 true, 这 个 div 束 可 以 被 拖 动 了 。 

dataTransfer 对 象 


dataTransfer.setData(format,data): 用 于 将 指定 格式 的 数据 赋值 给 dataTransfer 对 象 ,format 
代表 数据 的 类 型 ， 比 如 ，text、url 等 ，data 表示 要 设置 的 数据 。 

dataTransfer.getData(format): setData 对 应 ，getData 用 于 获取 数据 。 

拖 放 相关 事件 如 表 B-S 所 示 。 


表 B-5 
E 件 Bo xk 
"nme 当 一 个 元 素 开 始 被 拖 搜 的 时 候 触 发 。 用 户 拖 搜 元 素 需 要 附加 dragstart 事件 。 在 这 个 事件 中 ， 监 听 器 将 设 
8 置 与 这 次 拖 搜 相关 的 信息 
— 当 拖 搜 中 的 鼠标 第 一 次 进入 一 个 元 素 的 时 候 触 发 。 这 个 事件 的 监听 器 需要 指明 是 否 允 许 在 这 个 区 域 释放 
鼠标 
dragover 当 拖 搜 中 的 鼠标 移动 经 过 一 个 元 素 的 时 候 触 发 
dragleave 当 拖 搜 中 的 鼠标 离开 元 素 时 触发 。 监 听 器 需要 将 作为 可 释放 反馈 的 高 亮 或 插入 标记 去 除 
drag 这 个 事件 在 拖 搜 源 触 发 
这 个 事件 在 拖 搜 操作 结束 释放 时 于 释放 元 素 上 触发 。 一 个 监听 绒 用 来 响应 接收 被 拖 搜 的 数据 并 插入 到 释 
P 放 之 地 。 这 个 事件 只 有 在 需要 时 才 触 发 
dragend 拖 搜 源 在 拖 搜 操作 结束 将 得 到 dragend 事件 对 象 ， 不 管 操作 成 功 与 否 


B.4 ”客户 端 存 储 API 


客户 奖 存 储存 储 补 设计 为 用 来 提供 一 个 更 大 存储 量 ， 更 安全 ， 更 便捷 的 存储 方法 ,从 而 
可 以 替代 掉 将 一 些 不 需要 让 服务 器 知道 的 信息 存储 到 Cookies 里 的 传统 方法 。 客 户 端 存 储 的 
机 制 是 通过 存储 字符 串 类 型 的 键 / 值 对 ,来 提供 一 种 安全 的 存 取 方 式 。 这 个 附加 功能 的 目标 是 
提供 一 个 全 面 的 ,可 以 用 来 创建 交互 式 应 用 程序 的 方法 。 

localStorage 如 表 B-6 所 示 。 


表 B-6 
属性 /方法 Ho Xx 
window.localStorage TS AUT V a 3 SE 
localStorage.setItem 添加 数据 
localStorage.getItem 获取 数据 
localStorage.removeltem 删除 数据 
localStorage.clear 清除 挥 所 有 的 数据 
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sessionStorage 如 表 B-7 所 示 。 


XA B-7 
属性 /方法 Hi XR 
window.sessionStorage TS AUT bal a TF 
sessionStorage.setItem 添加 数据 
sessionStorage.getItem 获取 数据 
sessionStorage.removeltem 删除 数据 
sessionStorage.clear 清除 挥 所 有 的 数据 


B.S WebSocket API 


WebSocket E — P ERER, SEREH ES s A i BT) FT JE ABS ER 
互 式 通 信 会 话 成 为 可 能 ， 有 了 这 个 API, PRAT EA TH RS ni AIRE J FP EU SEE 2 H HS] IZ, 
无 需 轮 询 服务 器 的 啊 应 。 

WebSocket API 如 表 B-8 所 示 。 


表 B-8 
So d JH — XN 
message 接收 时 间 句 柄 发 来 的 数据 
open 一 个 用 于 连接 打开 事件 的 事件 监听 器 
close XH] WebSocket 连接 或 停止 正在 进行 的 连接 请 求 
send 通过 WebSocket 连接 向 服务 器 发 送 数据 


B.6 Canvas API 


Canvas 是 HTMLS 中 的 新 元 素 ， 你 可 以 使 用 JavaScript 用 它 来 绘制 图 形 、 图 标 以 及 其 他 
任何 视觉 性 图 像 。 它 也 可 用 于 创建 图 片 特 效 和 动画 。 如 果 你 熟悉 的 掌握 这 部 分 API， 你 可 以 
用 Canvas 创建 丰富 的 Web 应 用 程序 。 

画图 环境 : canvas.getContext("2d") 

颜色 、 样 式 和 阴影 如 表 B-9 所 示 。 


X B-9 

属 性 fii X 

fillStyle 设置 或 返回 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 
strokeStyle 设置 或 返回 用 于 笔触 的 颜色 、 渐 变 或 模式 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 

shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 距 形状 的 水 平 距离 
shadowOffsetY 设置 或 返回 阴影 距 形状 的 垂直 距离 
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渐变 如 表 B-10 所 示 。 


AO 
createLinearGradient() 
createPattern() 
createRadialGradient() 


addColorStop() 


X B-10 


创建 线性 渐变 〔 用 在 画布 内 容 上 ) 


在 指定 的 方向 上 重复 指定 的 元 素 


创建 放射 状 /环形 的 渐变 《用 在 画布 内 容 上 ) 


规定 渐变 对 象 中 的 颜色 和 停止 位 置 


线条 样式 如 表 B-11 所 示 。 


lg 性 
lineCap 
lineJoin 

line Width 


miterLimit 


和 矩形 如 表 B-12 所 示 。 


rect() 
fillRect() 
strokeRect() 


clearRect() 


路 径 如 表 B-13 Br. 


方 法 
fillo 
stroke() 
beginPath() 
moveTo() 


closePath() 


表 B-11 


设置 或 返回 线条 的 结束 端点 样式 


设置 或 返回 两 条 线 相 交 时 ， 所 创建 的 拐角 类 型 


设置 或 返回 当前 的 线条 宽度 


设置 或 返回 最 大 斜 接 长 度 


表 B-12 
描 
创建 矩形 
绘制 “被 填充 ”的 矩形 
绘制 矩形 《无 填充 ) 
在 给 定 的 惩 形 内 清除 指定 的 像素 
X B-13 
描 


填充 当前 绘图 〈 路 径 ) 
绘制 已 定义 的 路 径 


起 始 一 条 路 径 ， 或 重 置 当 前 路 径 


把 路 径 移 动 到 画布 中 的 指定 点 ， 不 创建 线条 


创建 从 当前 点 回 到 起 始点 的 路 径 


BE 


附录 
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CHE) 
Ho d 描 x 
lineTo() 添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 
clip() 从 原始 画布 剪 切 任意 形状 和 尺寸 的 区 域 
quadraticCurveTo() BFE UR UGE Hl Zi 
bezierCurveTo() 创建 三 次 方 贝 塞 尔 曲线 
arc() 创建 弧 /曲线 (用 于 创建 圆 形 或 部 分 圆 ) 
arcTo() 创建 两 切线 之 间 的 弧 / 曲 线 
isPointInPath() 如 果 指 定 的 点 位 于 当前 路 径 中 ， 则 返回 true， 否 则 返回 false 


转换 如 表 B-14 所 示 。 


表 B-14 
Eod 描述 
scale() Zt ACA Bi 22 R E SEC BEL] 
rotate() 旋转 当前 绘图 
translate() 重新 映射 画布 上 的 (0,0) 位 置 
transform() Pe AY i PERO E 
setTransform() eS Ue PR Ey FEB. EAJ8351T transform) 
文本 如 表 B-15 所 示 。 
表 B-15 
属 性 描 述 
font 设置 或 返回 文本 内 容 的 当前 字体 属性 
textAlign 设置 或 返回 文本 内 容 的 当前 对 齐 方 式 
textBaseline 设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 
填充 如 表 B-16 所 示 。 
X B-16 
Ao d 描 述 
fillText() 在 画布 上 绘制 “被 填充 的 ”文本 
strokeText() 在 画布 上 绘制 文本 《〈 无 填充 ) 
measureText() 返回 包含 指定 文本 宽度 的 对 象 
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图 像 绘 制 如 表 B-17 Br. 


X B-17 
"MEE — ji x 
drawImage() 向 画布 上 绘制 图 像 、 画 布 或 视频 
像素 操作 如 表 B-18 所 示 。 
表 B-18 
属 性 a 
width 返回 ImageData 对 象 的 宽度 
height 返回 ImageData 对 象 的 高 度 
data 返回 一 个 对 象 ， 其 包含 指定 的 ImageData 对 象 的 图 像 数据 
createImageData() 创建 新 的 、 空 白 的 ImageData WHR 
getImageData() 返回 ImageData 对 象 ， 该 对 象 为 画布 上 指定 的 矩形 复制 像素 数据 
putImageData() 把 图 像 数据 〈 从 指定 的 ImageData 对 象 ) 放 回 画布 上 
合成 如 表 B-19 所 示 。 
X B-19 
属 性 描 x 
globalAlpha 设置 或 返回 绘图 的 当前 Alpha 或 透明 值 
globalCompositeOperation 设置 或 返回 新 图 像 如 何 绘制 到 已 有 的 图 像 上 
save() 保存 当前 环境 的 状态 
restore() 返回 之 前 保存 过 的 路 径 状 态 和 属性 


B.7 Audio/Video API 


HTMLS 多 媒体 组 件 指 的 是 Video (视频 ) 组 件 和 Audio 〈 音 频 ) 组 件 。 
Audio/Video 相关 属性 如 表 B-20 PZR. 


X B-20 
属 性 titi 述 
audioTracks 返回 表示 可 用 音 轨 的 AudioTrackList 对 象 
autoplay 设置 或 返回 是 否 在 加 载 完 成 后 随即 播放 音频 /视频 
buffered 返回 表示 音频 /视频 已 缓冲 部 分 的 TimeRanges 对 象 
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hm o 人 性 
controller 
controls 
crossOrigin 
currentSrc 
currentTime 


defaultMuted 


defaultPlaybackRate 


duration 
ended 
error 
loop 
mediaGroup 
muted 
networkState 
paused 
playbackRate 
played 
preload 
readyState 


seekable 


titi 述 
返回 表示 音频 /视频 当前 媒体 控制 器 的 MediaController 对 象 
设置 或 返回 音频 /视频 是 否 显 示 控 件 〈 比 如 播放 /暂停 等 ) 


设置 或 返回 音频 /视频 的 CORS 设置 


返回 当前 音频 /视频 的 URL 

没 置 或 返回 音频 /视频 中 的 当前 播放 位 置 〈 以 秒 计 ) 不 加 单位 
设置 或 返回 音频 /视频 默认 是 否 静 音 

设置 或 返回 音频 /视频 的 默认 播放 速度 

返回 当前 音频 /视频 的 长 度 《〈 以 秒 计 ) 

返回 音频 /视频 的 播放 是 否 已 结束 

返回 表示 音频 /视频 错误 状态 的 MediaError 对 和 象 

设置 或 返回 音频 /视频 是 否 应 在 结束 时 重新 播放 

置 或 返回 音频 /视频 所 属 的 组 合 〈 用 于 连接 多 个 音频 /视频 元 素 ) 
设置 或 返回 音频 /视频 是 否 静 音 

返回 音频 /视频 的 当前 网 络 状态 

设置 或 返回 音频 /视频 是 否 暂 停 

设置 或 返回 音频 /视频 播放 的 速度 

返回 表示 音频 /视频 已 播放 部 分 的 TimeRanges 对 象 

设置 或 返回 音频 /视频 是 否 应 该 在 页 面 加 载 后 进行 加 载 
回音 频 / 视 频 当 前 的 就 绪 状 态 


返回 表示 音频 /视频 可 寻 址 部 分 的 TimeRanges 对 象 


4 


x 


<= 


返 


Audio/Video 相关 事件 如 表 B-21 所 示 。 


mo d 
abort 
canplay 
canplaythrough 
durationchange 
emptied 
ended 
error 


loadeddata 
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当 音频 /视频 的 加 载 已 放弃 时 

当 浏览 器 可 以 播放 音频 /视频 时 

当 浏览 器 可 在 不 因 缓冲 而 停顿 的 情况 下 进行 播放 时 
当 音 频 / 视 频 的 时 长 已 更 改 时 

当 目 前 的 播放 列表 为 空 时 

当 目 前 的 播放 列表 已 结束 时 

当 在 首 频 /视频 加 载 期 间 发 生 错 误 时 

当 浏览 器 已 加 载 音 频 / 视 频 的 当前 帧 时 


OF 
loadedmetadata 
loadstart 
pause 
play 
playing 
progress 
ratechange 
seeked 
seeking 
stalled 
suspend 
timeupdate 
volumechange 


waiting 


当 浏 览 器 已 加 载 音频 /视频 的 元 数据 时 

当 浏 览 器 开始 查找 音频 /视频 时 

当 音 频 /视频 已 暂停 时 

当 音 频 / 视 频 已 开始 或 不 再 暂停 时 

当 音 频 /视频 在 已 因 缓冲 而 暂停 或 停止 后 已 就 绪 时 
当 浏 览 占 正在 下 载 首 频 /视频 时 

当 音 频 /视频 的 播放 速度 已 更 改 时 

当 用 户 已 移动 /跳跃 到 音频 /视频 中 的 新 位 置 时 
当 用 户 开始 移动 / 跑 跃 到 音频 /视频 中 的 新 位 置 时 
当 浏 览 器 尝试 获取 媒体 数据 ， 但 数据 不 可 用 时 
当 浏 览 器 刻意 不 获取 媒体 数据 时 

当 目 前 的 播放 位 置 已 更 改 时 

当 音 量 已 更 改 时 

当 视 频 由 于 需要 缓冲 下 一 帧 而 停止 


B.8 History API 


如 表 B-22 所 示 。 


À 法 


history.pushState() 


history.replaceState() 


pushState() 


replaceState() 


B.9 地 理 位 置 


Geolocation API 存在 于 navigator 对 象 中 ， 


Hid 
getCurrentPosition 


watchPosition 


clearWatch 


X B-22 


逐条 地 添加 历史 记录 条 日 
地 修改 历史 记录 条 日 
在 当前 文档 内 创建 和 激活 新 的 历史 记录 条 日 


类 似 于 history.pushState()， 不 同 之 处 在 于 replaceState() 方 法 会 修改 当前 历史 记录 条 目 而 并 非 


创建 新 的 条 目 


API 


X B-23 


jü 述 


该 方法 有 三 个 参数 ， 第 一 个 参数 是 成 功 获 取 位 置信 息 的 回调 函数 ， 
二 个 参数 用 于 捕获 获取 位 置信 息 出 错 的 情况 ; 


包含 3 个 方法 ， 如 表 B-23 Arm: 


第 三 个 参数 是 配置 项 


它 是 方法 唯一 必需 的 参数 ， 第 


表示 重复 获取 地 理 位 置 ， 相 当 于 将 getCurrentPosition 这 个 方法 利用 setinterval 不 断 执 行 ， 其 他 用 法 
和 参数 使 用 一 样 


用 来 清除 前 一 次 获取 的 位 置信 息 


215 


HTML5 


E 


获取 信息 成 功 之 后 ， 


lg 性 
coords.latitude 
coords.longitude 
coords.altitude 
coords.accuracy 
coords.altitudeAccuracy 
coords. heading 
coords.speed 


timestamp 
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目 动 生成 一 个 包含 返回 地 理 信息 的 position 对 象 如 表 B-24 Brzs 


表 B-24 


纬度 
经 度 
海拔 
位 置 精确 度 
海拔 精确 度 
HH 
速度 
啊 应 的 日 期 /时 间 


MY 录 


附录 C: ARFERIR 


C.1 Wamp 222 


WampServer 7 —akfE Window 环境 下 集 Apache Web 服务 器 、PHP 解 释 器 以 及 MySQL 
数据 库 的 整合 软件 包 。 使 用 Wamp， 不 需要 开发 人 员 耗 费 太 多 的 时 间 去 配置 环境 ， 可 以 更 加 
专注 开发 。 

(1) 首先 上 Wamp 官网 下 载 Wamp 集成 安装 包 。 

(2) 解压 Wamp 包 ， 解 压 后 会 出 现 一 个 .exe 的 安装 文件 ， 然 后 双击 .exe 文件 进行 安装 ， 
出 现 的 第 一 个 界面 主要 是 一 些 欢迎 信息 。 

(3) 第 二 个 界面 是 Wamp 的 用 户 协 议 信 息 ， 主 要 是 Wamp 的 一 些 使 用 作者 和 使 用 声明 信 
kA, W “Taccept the agreement”， 点 击 Next, Aul C-1 所 示 。 


W Setup - WampServer 2 


License Agreement 


X 
Please read the following important information before continuing. uu 


Please read the following License Agreement. You must accept the terms of this 
agreement before continuing with the installation. 


** WampServer 


by 
Creator : Romain Bourdon 
Maintainer / Upgrade/Roadmap : Herve Leclerc - herve.leclerc@alterway. fr 


GNU GENERAL PUBLIC LICENSE 
Version 2, June 1991 


Copyright (C) 1989, 1991 Free Software Foundation, Inc. v 


© I accept the agreement 
@)I do not accept the agreement 


« Back Next > Cancel 
C-1 


(4) WER PATE, WME C-2 所 示 。 


© Setup - WampServer 2 


Select Destination Location 


x 
Where should WampServer 2 be installed? W 


Setup will install WampServer 2 into the following folder. 


To continue, dick Next. If you would like to select a different folder, click Browse. 


Browse... 


Atleast 225.7 MB of free disk space is required. 


C-2 
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(50 选择 是 耕 创 建 创 面 快 捷 方式 和 局 动 位 快捷 方式 ， 根 据 需 求 进行 勾 选 ， 如 图 C-3 
PESE 


© Setup - WampServer 2 — 


x 
Select Additional Tasks (m. 
一 


Which additional tasks should be performed? 


Select the additional tasks you would like Setup to perform while installing WampServer 
2, then click Next. 


Additional icons: 
Create a Quick Launch icon 
[_] Create a Desktop icon 


< Back Cancel 


图 C-3 


(6) 确定 安装 信息 ， 点 击 install 进行 安 闭 。 

(7) 等 待 安装 。 

(8) 设置 stmp 和 邮件 信息 ， 这 时 候 可 以 随便 设置 ， 如 果 想 要 修改 的 话 ， 可 以 在 安装 完 
成 后 另行 修改 。 

(9) 安装 完毕 点 击 运 行 。 


C.2 Node 安装 


1. ROR 

(1) 首先 官网 Chttp://nodejs.cn/download/) Fa Node.js Agee, ALPE OR EY FE d 
置 下 载 相应 的 安装 包 。 

(2) 安装 Nodejs， 点 击 下 载 后 的 文件 安装 ， 然 后 点 next， 然 后 选中 同意 安装 协议 ， 然 
后 点 next， 然 后 可 以 日 定义 安装 日 录 默 认 C:\Program Filesnodejs\， 然 后 点 next， 默 认 安 装 全 
部 组 件 然 后 点 next， 然 后 点 击 install 安装 等 每 ， 然 后 点 击 finish 安装 完成 。 注 意 : 将 node 安 
装 目录 添加 进 path 环境 变量 。 

(3) 在 命令 行 cmd 控制 行 输入 : node -v， 探 制 台 将 打印 出 : 相应 版 本 号 ”提示 安装 
成 功 


2. Node.js Express 框架 


(1) Express 人 简介: 

Express 是 一 个 简洁 而 灵活 的 node.js Web 应 用 框架 ,提供 了 一 系列 强大 特性 帮助 你 创建 
各 种 Web YH, FIFE RAY HTTP TH. 

使 用 Express 可 以 快速 地 搭建 一 个 完整 功能 的 网 站 。 

Express 框架 核心 特性 : 
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附录 


可 以 设置 中 间 件 来 啊 应 HTTP 请 求 。 定 义 了 路 由 表 用 于 执行 不 同 的 HTTP. 请 求 动 作 。 
可 以 通过 癌 模 板 传递 参数 来 动态 洽 染 HTML 页 面 。 
(2) 安装 Express: 


S npm install express save 


以 上 命令 会 将 Express 框架 安装 在 当期 日 录 的 node modules 目录 中 ， node modules 
目录 下 会 自动 创建 express 目录 。 下 面 几 个 重要 的 模块 是 需要 与 express HEAR LAREN: 

body-parser - node.js 中 间 件 ， 用 于 处 理 JSON, Raw, Text 和 URL 编码 的 数据 。 
cookie-parser 一 这 就 是 一 个 解析 Cookie 的 工具 。 通 过 req.cookies 可 以 取 到 传 过 来 的 
Cookie， 并 把 它们 转 成 对 象 。 

multer-node.js 中 间 件 ， 用 于 处 理 enctype-"multipart/form-data" (设置 表单 的 MIME 编 
R3») 的 表单 数据 。 


S npm install body-parser --save 
S npm install cookie par- er Save 


> Rpm inotall multer Save 
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>. UNIQUE TECHNOLOGY 


> ES S y M : ZUR eet ` +-+ = / \ = 
3 * UNIQUE LL AMRAH AER Zxr3J 


fra: 
hi Fey — see ze 


LEX LIOXE 


ZS FER ARE A] MILF 2013, BAB 
于 山西 太原 。 公 司 是 由 业界 互联 网 技术 专家 共 
同 发 起 成 立 。 优 逸 客 是 国内 互联 网 前 端 开发 实 
MTER “FRB” . SEMA mit “A 
案 提 供 商 ”， 是 中 国 UI 职 业 教 育 的 “知名 品 
牌 ”。 公 司 的 互联 网 技术 实 训 体系 是 历时 一 年 
的 深度 调研 并 结合 企业 对 人 才 实 际 需 求 研 发 而 
成 ， 在 此 基础 上 配 以 完善 的 职业 规划 体系 ， 规 
范 的 人 才 培 养 流程 和 标准 ， 从 而 培养 出 互联 网 
高 端 技 术 人 才 . 

经 过 3 年 发 展 ， 公 司 已 先后 在 北京 、 山 西 、 陕 
西 等 区 域 建立 了 互联 网 人 才 实 训 基 地 ， 已 为 我 
国 培养 出 5000 余 名 互联 网 高 端 技 术 人 才 。 在 未 
来 ， 我 们 将 继续 秉承 “专注 、 极 致 、 口 碑 ” 的 
文化 理念 ， 逐 渐 成 长 为 我 国 顶尖 的 互联 网 人 才 
培养 公司 . 


山西 总 部 : 山西 省 太原 市 高 新 区 学 府 街 平阳 路 口 凯 通 大 厦 2 层 
电话 : 0351-7324758 网 址 : www.sxuek.com 


西安 分 公司 : 陕西 省 西安 市 外 事 学 院 南 校区 电信 缴费 大 厅 2 层 
电话 : 029- 87566140 网 址 : www.uekedu.com 


优 逸 客 山西 微 信 二 维 码 优 逸 客 西安 徽 信 二 维 码 


HTML 
Jae ML 


本 书 是 一 本 学 习 HTML5 的 宝典 ， 以 实际 项 目 为 驱动 ， 内 容 
全 面 ， 讲 解 通 俗 ， 适 合 各 层次 的 学 习 者 。 全 书 分 为 14 章 ， 由 闭 
入 深 地 讲解 了 HTML5 的 基本 概念 和 基本 功能 ， 包 括 地 理 位 置 定 
位 、 本 地 存储 、 离 线 存储 、WebSocket. Canvas. 表单 等 . 
对 每 一 个 概念 的 讲解 都 配备 了 恰如其分 的 示例 和 代码 ， 让 读者 
通过 动手 实践 ， 切 身体 会 到 这 些 概念 的 含义 和 价值 。 na 
部 分 结合 实例 深入 讲解 了 HTML5 在 PC 端的 大 放 异 彩 的 功能 
半 部 分 则 深入 讲解 HTML5 在 移动 端的 应 用 开发 知识 ， 系 ace 
论 了 离线 存储 、 本 地 存储 和 HTML5 Canvas 游 戏 等 主题 。 

本 书 适合 各 个 层次 的 前 端 开 发 人 员 学 习 ， 无 论 是 出 于 工作 
南 要 ， 还 是 好 奇 心 的 驱使 ， 只 要 你 想 深 入 理解 HTML5， 本 书 都 
会 让 你 大 有 收获 。 


